<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>API: carousel   Carousel.js  (YUI Library)</title>

	<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
	<link rel="stylesheet" type="text/css" href="assets/api.css" />

    <script type="text/javascript" src="assets/api-js"></script>
    <script type="text/javascript" src="assets/ac-js"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">
	<div id="hd">
        <h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1>
        <h3>Carousel Widget&nbsp; <span class="subtitle">2.7.0</span></h3>
        <a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a> 
            &gt; <a href="./module_carousel.html" title="carousel">carousel</a>
                
                 &gt; Carousel.js (source view) 
        <form onsubmit="return false">
            <div id="propertysearch">
                Search: <input autocomplete="off" id="searchinput" />
                <div id="searchresults">
                    &nbsp;
                </div>
            </div>
        </form>
	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
                <fieldset>
                    <legend>Filters</legend>
                <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
                <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
                <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
                </fieldset>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 .classopts { display:none; }
                        </style>
<div class="highlight" ><pre><span class="c">/**</span>
<span class="c"> * The Carousel module provides a widget for browsing among a set of like</span>
<span class="c"> * objects represented pictorially.</span>
<span class="c"> *</span>
<span class="c"> * @module carousel</span>
<span class="c"> * @requires yahoo, dom, event, element</span>
<span class="c"> * @optional animation</span>
<span class="c"> * @namespace YAHOO.widget</span>
<span class="c"> * @title Carousel Widget</span>
<span class="c"> * @beta</span>
<span class="c"> */</span>
<span class="o">(</span><span class="k">function</span> <span class="o">()</span> <span class="o">{</span>

    <span class="k">var</span> <span class="nx">WidgetName</span><span class="o">;</span>             <span class="c">// forward declaration</span>
<span class="c"></span>
    <span class="c">/**</span>
<span class="c">     * The Carousel widget.</span>
<span class="c">     *</span>
<span class="c">     * @class Carousel</span>
<span class="c">     * @extends YAHOO.util.Element</span>
<span class="c">     * @constructor</span>
<span class="c">     * @param el {HTMLElement | String} The HTML element that represents the</span>
<span class="c">     * the container that houses the Carousel.</span>
<span class="c">     * @param cfg {Object} (optional) The configuration values</span>
<span class="c">     */</span>
    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">Carousel</span> <span class="o">=</span> <span class="k">function</span> <span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Component creation&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>

        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">Carousel</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">constructor</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">cfg</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/*</span>
<span class="c">     * Private variables of the Carousel component</span>
<span class="c">     */</span>

    <span class="c">/* Some abbreviations to avoid lengthy typing and lookups. */</span>
    <span class="k">var</span> <span class="nx">Carousel</span>    <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">Carousel</span><span class="o">,</span>
        <span class="nx">Dom</span>         <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Dom</span><span class="o">,</span>
        <span class="nx">Event</span>       <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Event</span><span class="o">,</span>
        <span class="nx">JS</span>          <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">lang</span><span class="o">;</span>

    <span class="c">/**</span>
<span class="c">     * The widget name.</span>
<span class="c">     * @private</span>
<span class="c">     * @static</span>
<span class="c">     */</span>
    <span class="nx">WidgetName</span> <span class="o">=</span> <span class="s2">&quot;Carousel&quot;</span><span class="o">;</span>

    <span class="c">/**</span>
<span class="c">     * The internal table of Carousel instances.</span>
<span class="c">     * @private</span>
<span class="c">     * @static</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">instances</span> <span class="o">=</span> <span class="o">{},</span>

    <span class="c">/*</span>
<span class="c">     * Custom events of the Carousel component</span>
<span class="c">     */</span>

    <span class="c">/**</span>
<span class="c">     * @event afterScroll</span>
<span class="c">     * @description Fires when the Carousel has scrolled to the previous or</span>
<span class="c">     * next page.  Passes back the index of the first and last visible items in</span>
<span class="c">     * the Carousel.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">afterScrollEvent</span> <span class="o">=</span> <span class="s2">&quot;afterScroll&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event allItemsRemovedEvent</span>
<span class="c">     * @description Fires when all items have been removed from the Carousel.</span>
<span class="c">     * See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">allItemsRemovedEvent</span> <span class="o">=</span> <span class="s2">&quot;allItemsRemoved&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event beforeHide</span>
<span class="c">     * @description Fires before the Carousel is hidden.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">beforeHideEvent</span> <span class="o">=</span> <span class="s2">&quot;beforeHide&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event beforePageChange</span>
<span class="c">     * @description Fires when the Carousel is about to scroll to the previous</span>
<span class="c">     * or next page.  Passes back the page number of the current page.  Note</span>
<span class="c">     * that the first page number is zero.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">beforePageChangeEvent</span> <span class="o">=</span> <span class="s2">&quot;beforePageChange&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event beforeScroll</span>
<span class="c">     * @description Fires when the Carousel is about to scroll to the previous</span>
<span class="c">     * or next page.  Passes back the index of the first and last visible items</span>
<span class="c">     * in the Carousel and the direction (backward/forward) of the scroll.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">beforeScrollEvent</span> <span class="o">=</span> <span class="s2">&quot;beforeScroll&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event beforeShow</span>
<span class="c">     * @description Fires when the Carousel is about to be shown.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">beforeShowEvent</span> <span class="o">=</span> <span class="s2">&quot;beforeShow&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event blur</span>
<span class="c">     * @description Fires when the Carousel loses focus.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">blurEvent</span> <span class="o">=</span> <span class="s2">&quot;blur&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event focus</span>
<span class="c">     * @description Fires when the Carousel gains focus.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">focusEvent</span> <span class="o">=</span> <span class="s2">&quot;focus&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event hide</span>
<span class="c">     * @description Fires when the Carousel is hidden.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">hideEvent</span> <span class="o">=</span> <span class="s2">&quot;hide&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event itemAdded</span>
<span class="c">     * @description Fires when an item has been added to the Carousel.  Passes</span>
<span class="c">     * back the content of the item that would be added, the index at which the</span>
<span class="c">     * item would be added, and the event itself.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">itemAddedEvent</span> <span class="o">=</span> <span class="s2">&quot;itemAdded&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event itemRemoved</span>
<span class="c">     * @description Fires when an item has been removed from the Carousel.</span>
<span class="c">     * Passes back the content of the item that would be removed, the index</span>
<span class="c">     * from which the item would be removed, and the event itself.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">itemRemovedEvent</span> <span class="o">=</span> <span class="s2">&quot;itemRemoved&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event itemSelected</span>
<span class="c">     * @description Fires when an item has been selected in the Carousel.</span>
<span class="c">     * Passes back the index of the selected item in the Carousel.  Note, that</span>
<span class="c">     * the index begins from zero.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">itemSelectedEvent</span> <span class="o">=</span> <span class="s2">&quot;itemSelected&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event loadItems</span>
<span class="c">     * @description Fires when the Carousel needs more items to be loaded for</span>
<span class="c">     * displaying them.  Passes back the first and last visible items in the</span>
<span class="c">     * Carousel, and the number of items needed to be loaded.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">loadItemsEvent</span> <span class="o">=</span> <span class="s2">&quot;loadItems&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event navigationStateChange</span>
<span class="c">     * @description Fires when the state of either one of the navigation</span>
<span class="c">     * buttons are changed from enabled to disabled or vice versa.  Passes back</span>
<span class="c">     * the state (true/false) of the previous and next buttons.  The value true</span>
<span class="c">     * signifies the button is enabled, false signifies disabled.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">navigationStateChangeEvent</span> <span class="o">=</span> <span class="s2">&quot;navigationStateChange&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event pageChange</span>
<span class="c">     * @description Fires after the Carousel has scrolled to the previous or</span>
<span class="c">     * next page.  Passes back the page number of the current page.  Note</span>
<span class="c">     * that the first page number is zero.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">pageChangeEvent</span> <span class="o">=</span> <span class="s2">&quot;pageChange&quot;</span><span class="o">,</span>

    <span class="c">/*</span>
<span class="c">     * Internal event.</span>
<span class="c">     * @event render</span>
<span class="c">     * @description Fires when the Carousel is rendered.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">renderEvent</span> <span class="o">=</span> <span class="s2">&quot;render&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event show</span>
<span class="c">     * @description Fires when the Carousel is shown.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">showEvent</span> <span class="o">=</span> <span class="s2">&quot;show&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event startAutoPlay</span>
<span class="c">     * @description Fires when the auto play has started in the Carousel.  See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">startAutoPlayEvent</span> <span class="o">=</span> <span class="s2">&quot;startAutoPlay&quot;</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * @event stopAutoPlay</span>
<span class="c">     * @description Fires when the auto play has been stopped in the Carousel.</span>
<span class="c">     * See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">stopAutoPlayEvent</span> <span class="o">=</span> <span class="s2">&quot;stopAutoPlay&quot;</span><span class="o">,</span>

    <span class="c">/*</span>
<span class="c">     * Internal event.</span>
<span class="c">     * @event uiUpdateEvent</span>
<span class="c">     * @description Fires when the UI has been updated.</span>
<span class="c">     * See</span>
<span class="c">     * &lt;a href=&quot;YAHOO.util.Element.html#addListener&quot;&gt;Element.addListener&lt;/a&gt;</span>
<span class="c">     * for more information on listening for this event.</span>
<span class="c">     * @type YAHOO.util.CustomEvent</span>
<span class="c">     */</span>
    <span class="nx">uiUpdateEvent</span> <span class="o">=</span> <span class="s2">&quot;uiUpdate&quot;</span><span class="o">;</span>

    <span class="c">/*</span>
<span class="c">     * Private helper functions used by the Carousel component</span>
<span class="c">     */</span>

    <span class="c">/**</span>
<span class="c">     * Create an element, set its class name and optionally install the element</span>
<span class="c">     * to its parent.</span>
<span class="c">     * @method createElement</span>
<span class="c">     * @param el {String} The element to be created</span>
<span class="c">     * @param attrs {Object} Configuration of parent, class and id attributes.</span>
<span class="c">     * If the content is specified, it is inserted after creation of the</span>
<span class="c">     * element. The content can also be an HTML element in which case it would</span>
<span class="c">     * be appended as a child node of the created element.</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">createElement</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">newEl</span> <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

        <span class="nx">attrs</span> <span class="o">=</span> <span class="nx">attrs</span> <span class="o">||</span> <span class="o">{};</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">className</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">newEl</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">className</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">parent</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">attrs</span><span class="o">.</span><span class="nx">parent</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">newEl</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">newEl</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;id&quot;</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">id</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">content</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">content</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">newEl</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">attrs</span><span class="o">.</span><span class="nx">content</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">newEl</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">content</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="k">return</span> <span class="nx">newEl</span><span class="o">;</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Get the computed style of an element.</span>
<span class="c">     *</span>
<span class="c">     * @method getStyle</span>
<span class="c">     * @param el {HTMLElement} The element for which the style needs to be</span>
<span class="c">     * returned.</span>
<span class="c">     * @param style {String} The style attribute</span>
<span class="c">     * @param type {String} &quot;int&quot;, &quot;float&quot;, etc. (defaults to int)</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">,</span> <span class="nx">type</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">value</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">function</span> <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">val</span><span class="o">;</span>

            <span class="c">/*</span>
<span class="c">             * XXX: Safari calculates incorrect marginRight for an element</span>
<span class="c">             * which has its parent element style set to overflow: hidden</span>
<span class="c">             * https://bugs.webkit.org/show_bug.cgi?id=13343</span>
<span class="c">             * Let us assume marginLeft == marginRight</span>
<span class="c">             */</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">style</span> <span class="o">==</span> <span class="s2">&quot;marginRight&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">env</span><span class="o">.</span><span class="nx">ua</span><span class="o">.</span><span class="nx">webkit</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">),</span> <span class="m">10</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">),</span> <span class="m">10</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">?</span> <span class="nx">val</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">function</span> <span class="nx">getStyleFloatVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">val</span><span class="o">;</span>

            <span class="c">/*</span>
<span class="c">             * XXX: Safari calculates incorrect marginRight for an element</span>
<span class="c">             * which has its parent element style set to overflow: hidden</span>
<span class="c">             * https://bugs.webkit.org/show_bug.cgi?id=13343</span>
<span class="c">             * Let us assume marginLeft == marginRight</span>
<span class="c">             */</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">style</span> <span class="o">==</span> <span class="s2">&quot;marginRight&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">env</span><span class="o">.</span><span class="nx">ua</span><span class="o">.</span><span class="nx">webkit</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">));</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">));</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">?</span> <span class="nx">val</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">typeof</span> <span class="nx">type</span> <span class="o">==</span> <span class="s2">&quot;undefined&quot;</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;int&quot;</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">switch</span> <span class="o">(</span><span class="nx">style</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">case</span> <span class="s2">&quot;height&quot;</span><span class="o">:</span>
            <span class="nx">value</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">offsetHeight</span><span class="o">;</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">value</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">+=</span> <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginTop&quot;</span><span class="o">)</span>        <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginBottom&quot;</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">=</span> <span class="nx">getStyleFloatVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;height&quot;</span><span class="o">)</span>          <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginTop&quot;</span><span class="o">)</span>         <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginBottom&quot;</span><span class="o">)</span>      <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;borderTopWidth&quot;</span><span class="o">)</span>    <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;borderBottomWidth&quot;</span><span class="o">)</span> <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;paddingTop&quot;</span><span class="o">)</span>        <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;paddingBottom&quot;</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="nx">case</span> <span class="s2">&quot;width&quot;</span><span class="o">:</span>
            <span class="nx">value</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">offsetWidth</span><span class="o">;</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">value</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">+=</span> <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">)</span>       <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginRight&quot;</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">=</span> <span class="nx">getStyleFloatVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;width&quot;</span><span class="o">)</span>           <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">)</span>        <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;marginRight&quot;</span><span class="o">)</span>       <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;borderLeftWidth&quot;</span><span class="o">)</span>   <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;borderRightWidth&quot;</span><span class="o">)</span>  <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;paddingLeft&quot;</span><span class="o">)</span>       <span class="o">+</span>
                        <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;paddingRight&quot;</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="nx">default</span><span class="o">:</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">&quot;int&quot;</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">=</span> <span class="nx">getStyleIntVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">&quot;float&quot;</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">=</span> <span class="nx">getStyleFloatVal</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">value</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">style</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">return</span> <span class="nx">value</span><span class="o">;</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Compute and return the height or width of a single Carousel item</span>
<span class="c">     * depending upon the orientation.</span>
<span class="c">     *</span>
<span class="c">     * @method getCarouselItemSize</span>
<span class="c">     * @param which {String} &quot;height&quot; or &quot;width&quot; to be returned.  If this is</span>
<span class="c">     * passed explicitly, the calculated size is not cached.</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">getCarouselItemSize</span><span class="o">(</span><span class="nx">which</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
            <span class="nx">child</span><span class="o">,</span>
            <span class="nx">size</span>     <span class="o">=</span> <span class="m">0</span><span class="o">,</span>
            <span class="nx">vertical</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">typeof</span> <span class="nx">which</span> <span class="o">==</span> <span class="s2">&quot;undefined&quot;</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">size</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">size</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="m">0</span><span class="o">]))</span> <span class="o">{</span>
            <span class="k">return</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">child</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="m">0</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">typeof</span> <span class="nx">which</span> <span class="o">==</span> <span class="s2">&quot;undefined&quot;</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">vertical</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">);</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
            <span class="nx">vertical</span> <span class="o">=</span> <span class="nx">which</span> <span class="o">==</span> <span class="s2">&quot;height&quot;</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">vertical</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">size</span> <span class="o">=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">child</span><span class="o">,</span> <span class="s2">&quot;height&quot;</span><span class="o">);</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
            <span class="nx">size</span> <span class="o">=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">child</span><span class="o">,</span> <span class="s2">&quot;width&quot;</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">typeof</span> <span class="nx">which</span> <span class="o">==</span> <span class="s2">&quot;undefined&quot;</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">size</span> <span class="o">=</span> <span class="nx">size</span><span class="o">;</span> <span class="c">// save the size for later</span>
<span class="c"></span>        <span class="o">}</span>

        <span class="k">return</span> <span class="nx">size</span><span class="o">;</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Return the index of the first item in the view port for displaying item</span>
<span class="c">     * in &quot;pos&quot;.</span>
<span class="c">     *</span>
<span class="c">     * @method getFirstVisibleForPosition</span>
<span class="c">     * @param pos {Number} The position of the item to be displayed</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">getFirstVisibleForPosition</span><span class="o">(</span><span class="nx">pos</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">num</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

        <span class="k">return</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">floor</span><span class="o">(</span><span class="nx">pos</span> <span class="o">/</span> <span class="nx">num</span><span class="o">)</span> <span class="o">*</span> <span class="nx">num</span><span class="o">;</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Return the scrolling offset size given the number of elements to</span>
<span class="c">     * scroll.</span>
<span class="c">     *</span>
<span class="c">     * @method getScrollOffset</span>
<span class="c">     * @param delta {Number} The delta number of elements to scroll by.</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">getScrollOffset</span><span class="o">(</span><span class="nx">delta</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">itemSize</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span>
            <span class="nx">size</span>     <span class="o">=</span> <span class="m">0</span><span class="o">;</span>

        <span class="nx">itemSize</span> <span class="o">=</span> <span class="nx">getCarouselItemSize</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="nx">size</span>     <span class="o">=</span> <span class="nx">itemSize</span> <span class="o">*</span> <span class="nx">delta</span><span class="o">;</span>

        <span class="c">// XXX: really, when the orientation is vertical, the scrolling</span>
<span class="c"></span>        <span class="c">// is not exactly the number of elements into element size.</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">))</span> <span class="o">{</span>
            <span class="nx">size</span> <span class="o">-=</span> <span class="nx">delta</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">return</span> <span class="nx">size</span><span class="o">;</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Scroll the Carousel by a page backward.</span>
<span class="c">     *</span>
<span class="c">     * @method scrollPageBackward</span>
<span class="c">     * @param {Event} ev The event object</span>
<span class="c">     * @param {Object} obj The context object</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">scrollPageBackward</span><span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">obj</span><span class="o">.</span><span class="nx">scrollPageBackward</span><span class="o">();</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">preventDefault</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Scroll the Carousel by a page forward.</span>
<span class="c">     *</span>
<span class="c">     * @method scrollPageForward</span>
<span class="c">     * @param {Event} ev The event object</span>
<span class="c">     * @param {Object} obj The context object</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">scrollPageForward</span><span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">obj</span><span class="o">.</span><span class="nx">scrollPageForward</span><span class="o">();</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">preventDefault</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Set the selected item.</span>
<span class="c">     *</span>
<span class="c">     * @method setItemSelection</span>
<span class="c">     * @param {Number} newpos The index of the new position</span>
<span class="c">     * @param {Number} oldpos The index of the previous position</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
     <span class="k">function</span> <span class="nx">setItemSelection</span><span class="o">(</span><span class="nx">newpos</span><span class="o">,</span> <span class="nx">oldpos</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
            <span class="nx">cssClass</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
            <span class="nx">el</span><span class="o">,</span>
            <span class="nx">firstItem</span>  <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span><span class="o">,</span>
            <span class="nx">isCircular</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">),</span>
            <span class="nx">numItems</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">),</span>
            <span class="nx">numVisible</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">),</span>
            <span class="nx">position</span>   <span class="o">=</span> <span class="nx">oldpos</span><span class="o">,</span>
            <span class="nx">sentinel</span>   <span class="o">=</span> <span class="nx">firstItem</span> <span class="o">+</span> <span class="nx">numVisible</span> <span class="o">-</span> <span class="m">1</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">position</span> <span class="o">&gt;=</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">position</span> <span class="o">&lt;</span> <span class="nx">numItems</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">position</span><span class="o">]))</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">position</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">SELECTED_ITEM</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">newpos</span><span class="o">))</span> <span class="o">{</span>
            <span class="nx">newpos</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">newpos</span><span class="o">,</span> <span class="m">10</span><span class="o">);</span>
            <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">newpos</span><span class="o">)</span> <span class="o">?</span> <span class="nx">newpos</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
            <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">firstItem</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">newpos</span><span class="o">]))</span> <span class="o">{</span>
            <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">getFirstVisibleForPosition</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">newpos</span><span class="o">);</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">newpos</span><span class="o">);</span> <span class="c">// still loading the item</span>
<span class="c"></span>        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">newpos</span><span class="o">]))</span> <span class="o">{</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">newpos</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">SELECTED_ITEM</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">newpos</span> <span class="o">&lt;</span> <span class="nx">firstItem</span> <span class="o">||</span> <span class="nx">newpos</span> <span class="o">&gt;</span> <span class="nx">sentinel</span><span class="o">)</span> <span class="o">{</span> <span class="c">// out of focus</span>
<span class="c"></span>            <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">getFirstVisibleForPosition</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">newpos</span><span class="o">);</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">newpos</span><span class="o">);</span>
        <span class="o">}</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Fire custom events for enabling/disabling navigation elements.</span>
<span class="c">     *</span>
<span class="c">     * @method syncNavigation</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">syncNavigation</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">attach</span>   <span class="o">=</span> <span class="kc">false</span><span class="o">,</span>
            <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
            <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
            <span class="nx">i</span><span class="o">,</span>
            <span class="nx">navigation</span><span class="o">,</span>
            <span class="nx">sentinel</span><span class="o">;</span>

        <span class="c">// Don&#39;t do anything if the Carousel is not rendered</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">navigation</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;navigation&quot;</span><span class="o">);</span>
        <span class="nx">sentinel</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">+</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">)</span> <span class="o">===</span> <span class="m">0</span> <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">)</span> <span class="o">===</span> <span class="m">0</span> <span class="o">||</span>
                   <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">Event</span><span class="o">.</span><span class="nx">removeListener</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">prev</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span>
                            <span class="nx">scrollPageBackward</span><span class="o">);</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">prev</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FIRST_NAV_DISABLED</span><span class="o">);</span>
                    <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;disabled&quot;</span><span class="o">,</span>
                                <span class="s2">&quot;true&quot;</span><span class="o">);</span>
                    <span class="o">}</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_prevEnabled</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">attach</span> <span class="o">=</span> <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_prevEnabled</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">attach</span> <span class="o">=</span> <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_prevEnabled</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">attach</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">prev</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="nx">scrollPageBackward</span><span class="o">,</span>
                         <span class="nx">carousel</span><span class="o">);</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">prev</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FIRST_NAV_DISABLED</span><span class="o">);</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">removeAttribute</span><span class="o">(</span><span class="s2">&quot;disabled&quot;</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_prevEnabled</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="nx">attach</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">sentinel</span> <span class="o">&gt;=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">Event</span><span class="o">.</span><span class="nx">removeListener</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">next</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span>
                            <span class="nx">scrollPageForward</span><span class="o">);</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">next</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">DISABLED</span><span class="o">);</span>
                    <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;disabled&quot;</span><span class="o">,</span>
                                <span class="s2">&quot;true&quot;</span><span class="o">);</span>
                    <span class="o">}</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_nextEnabled</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">attach</span> <span class="o">=</span> <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_nextEnabled</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">attach</span> <span class="o">=</span> <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_nextEnabled</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">attach</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">next</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="nx">scrollPageForward</span><span class="o">,</span>
                         <span class="nx">carousel</span><span class="o">);</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">navigation</span><span class="o">.</span><span class="nx">next</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">DISABLED</span><span class="o">);</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">removeAttribute</span><span class="o">(</span><span class="s2">&quot;disabled&quot;</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_nextEnabled</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">navigationStateChangeEvent</span><span class="o">,</span>
                <span class="o">{</span> <span class="nx">next</span><span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_nextEnabled</span><span class="o">,</span> <span class="nx">prev</span><span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_prevEnabled</span> <span class="o">});</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Synchronize and redraw the Pager UI if necessary.</span>
<span class="c">     *</span>
<span class="c">     * @method syncPagerUi</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">syncPagerUi</span><span class="o">(</span><span class="nx">page</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">numPages</span><span class="o">,</span> <span class="nx">numVisible</span><span class="o">;</span>

        <span class="c">// Don&#39;t do anything if the Carousel is not rendered</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">numVisible</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">page</span><span class="o">))</span> <span class="o">{</span>
            <span class="nx">page</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">ceil</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">/</span> <span class="nx">numVisible</span><span class="o">);</span>
        <span class="o">}</span>
        <span class="nx">numPages</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">ceil</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">)</span> <span class="o">/</span> <span class="nx">numVisible</span><span class="o">);</span>

        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">num</span> <span class="o">=</span> <span class="nx">numPages</span><span class="o">;</span>
        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">cur</span> <span class="o">=</span> <span class="nx">page</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">numPages</span> <span class="o">&gt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CONFIG</span><span class="o">.</span><span class="nx">MAX_PAGER_BUTTONS</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_updatePagerMenu</span><span class="o">();</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_updatePagerButtons</span><span class="o">();</span>
        <span class="o">}</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Handle UI update.</span>
<span class="c">     * Call the appropriate methods on events fired when an item is added, or</span>
<span class="c">     * removed for synchronizing the DOM.</span>
<span class="c">     *</span>
<span class="c">     * @method syncUi</span>
<span class="c">     * @param {Object} o The item that needs to be added or removed</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">syncUi</span><span class="o">(</span><span class="nx">o</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isObject</span><span class="o">(</span><span class="nx">o</span><span class="o">))</span> <span class="o">{</span>
            <span class="k">return</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">switch</span> <span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">case</span> <span class="nx">itemAddedEvent</span><span class="o">:</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_syncUiForItemAdd</span><span class="o">(</span><span class="nx">o</span><span class="o">);</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="nx">case</span> <span class="nx">itemRemovedEvent</span><span class="o">:</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_syncUiForItemRemove</span><span class="o">(</span><span class="nx">o</span><span class="o">);</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="nx">case</span> <span class="nx">loadItemsEvent</span><span class="o">:</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_syncUiForLazyLoading</span><span class="o">(</span><span class="nx">o</span><span class="o">);</span>
            <span class="k">break</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">uiUpdateEvent</span><span class="o">);</span>
    <span class="o">}</span>

    <span class="c">/**</span>
<span class="c">     * Update the state variables after scrolling the Carousel view port.</span>
<span class="c">     *</span>
<span class="c">     * @method updateStateAfterScroll</span>
<span class="c">     * @param {Integer} item The index to which the Carousel has scrolled to.</span>
<span class="c">     * @param {Integer} sentinel The last element in the view port.</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">function</span> <span class="nx">updateStateAfterScroll</span><span class="o">(</span><span class="nx">item</span><span class="o">,</span> <span class="nx">sentinel</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
            <span class="nx">page</span>       <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;currentPage&quot;</span><span class="o">),</span>
            <span class="nx">newPage</span><span class="o">,</span>
            <span class="nx">numPerPage</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

        <span class="nx">newPage</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">/</span> <span class="nx">numPerPage</span><span class="o">,</span> <span class="m">10</span><span class="o">);</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">newPage</span> <span class="o">!=</span> <span class="nx">page</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;currentPage&quot;</span><span class="o">,</span> <span class="o">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">newPage</span> <span class="o">});</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">pageChangeEvent</span><span class="o">,</span> <span class="nx">newPage</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">))</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">!=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="nx">clearTimeout</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">);</span>
        <span class="nx">delete</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">;</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAutoPlayOn</span><span class="o">())</span> <span class="o">{</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">startAutoPlay</span><span class="o">();</span>
        <span class="o">}</span>

        <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">afterScrollEvent</span><span class="o">,</span>
                           <span class="o">{</span> <span class="nx">first</span><span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span><span class="o">,</span>
                             <span class="nx">last</span><span class="o">:</span> <span class="nx">sentinel</span> <span class="o">},</span>
                           <span class="nx">carousel</span><span class="o">);</span>
    <span class="o">}</span>

    <span class="c">/*</span>
<span class="c">     * Static members and methods of the Carousel component</span>
<span class="c">     */</span>

    <span class="c">/**</span>
<span class="c">     * Return the appropriate Carousel object based on the id associated with</span>
<span class="c">     * the Carousel element or false if none match.</span>
<span class="c">     * @method getById</span>
<span class="c">     * @public</span>
<span class="c">     * @static</span>
<span class="c">     */</span>
    <span class="nx">Carousel</span><span class="o">.</span><span class="nx">getById</span> <span class="o">=</span> <span class="k">function</span> <span class="o">(</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="nx">instances</span><span class="o">[</span><span class="nx">id</span><span class="o">]</span> <span class="o">?</span> <span class="nx">instances</span><span class="o">[</span><span class="nx">id</span><span class="o">].</span><span class="nx">object</span> <span class="o">:</span> <span class="kc">false</span><span class="o">;</span>
    <span class="o">};</span>

    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">Carousel</span><span class="o">,</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Element</span><span class="o">,</span> <span class="o">{</span>

        <span class="c">/*</span>
<span class="c">         * Internal variables used within the Carousel component</span>
<span class="c">         */</span>

        <span class="c">/**</span>
<span class="c">         * The Animation object.</span>
<span class="c">         *</span>
<span class="c">         * @property _animObj</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_animObj</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The Carousel element.</span>
<span class="c">         *</span>
<span class="c">         * @property _carouselEl</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_carouselEl</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The Carousel clipping container element.</span>
<span class="c">         *</span>
<span class="c">         * @property _clipEl</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_clipEl</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The current first index of the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @property _firstItem</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_firstItem</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Does the Carousel element have focus?</span>
<span class="c">         *</span>
<span class="c">         * @property _hasFocus</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_hasFocus</span><span class="o">:</span> <span class="kc">false</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Is the Carousel rendered already?</span>
<span class="c">         *</span>
<span class="c">         * @property _hasRendered</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_hasRendered</span><span class="o">:</span> <span class="kc">false</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Is the animation still in progress?</span>
<span class="c">         *</span>
<span class="c">         * @property _isAnimationInProgress</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_isAnimationInProgress</span><span class="o">:</span> <span class="kc">false</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Is the auto-scrolling of Carousel in progress?</span>
<span class="c">         *</span>
<span class="c">         * @property _isAutoPlayInProgress</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_isAutoPlayInProgress</span><span class="o">:</span> <span class="kc">false</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The table of items in the Carousel.</span>
<span class="c">         * The numItems is the number of items in the Carousel, items being the</span>
<span class="c">         * array of items in the Carousel.  The size is the size of a single</span>
<span class="c">         * item in the Carousel.  It is cached here for efficiency (to avoid</span>
<span class="c">         * computing the size multiple times).</span>
<span class="c">         *</span>
<span class="c">         * @property _itemsTable</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_itemsTable</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The Carousel navigation buttons.</span>
<span class="c">         *</span>
<span class="c">         * @property _navBtns</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_navBtns</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The Carousel navigation.</span>
<span class="c">         *</span>
<span class="c">         * @property _navEl</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_navEl</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Status of the next navigation item.</span>
<span class="c">         *</span>
<span class="c">         * @property _nextEnabled</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_nextEnabled</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The Carousel pages structure.</span>
<span class="c">         * This is an object of the total number of pages and the current page.</span>
<span class="c">         *</span>
<span class="c">         * @property _pages</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_pages</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Status of the previous navigation item.</span>
<span class="c">         *</span>
<span class="c">         * @property _prevEnabled</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_prevEnabled</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * Whether the Carousel size needs to be recomputed or not?</span>
<span class="c">         *</span>
<span class="c">         * @property _recomputeSize</span>
<span class="c">         * @private</span>
<span class="c">         */</span>
        <span class="nx">_recomputeSize</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>

        <span class="c">/*</span>
<span class="c">         * CSS classes used by the Carousel component</span>
<span class="c">         */</span>

        <span class="nx">CLASSES</span><span class="o">:</span> <span class="o">{</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the Carousel navigation buttons.</span>
<span class="c">             *</span>
<span class="c">             * @property BUTTON</span>
<span class="c">             * @default &quot;yui-carousel-button&quot;</span>
<span class="c">             */</span>
            <span class="nx">BUTTON</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-button&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the Carousel element.</span>
<span class="c">             *</span>
<span class="c">             * @property CAROUSEL</span>
<span class="c">             * @default &quot;yui-carousel&quot;</span>
<span class="c">             */</span>
            <span class="nx">CAROUSEL</span><span class="o">:</span> <span class="s2">&quot;yui-carousel&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the container of the items in the Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property CAROUSEL_EL</span>
<span class="c">             * @default &quot;yui-carousel-element&quot;</span>
<span class="c">             */</span>
            <span class="nx">CAROUSEL_EL</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-element&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the Carousel&#39;s container element.</span>
<span class="c">             *</span>
<span class="c">             * @property CONTAINER</span>
<span class="c">             * @default &quot;yui-carousel-container&quot;</span>
<span class="c">             */</span>
            <span class="nx">CONTAINER</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-container&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the Carousel&#39;s container element.</span>
<span class="c">             *</span>
<span class="c">             * @property CONTENT</span>
<span class="c">             * @default &quot;yui-carousel-content&quot;</span>
<span class="c">             */</span>
            <span class="nx">CONTENT</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-content&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a disabled navigation button.</span>
<span class="c">             *</span>
<span class="c">             * @property DISABLED</span>
<span class="c">             * @default &quot;yui-carousel-button-disabled&quot;</span>
<span class="c">             */</span>
            <span class="nx">DISABLED</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-button-disabled&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the first Carousel navigation button.</span>
<span class="c">             *</span>
<span class="c">             * @property FIRST_NAV</span>
<span class="c">             * @default &quot; yui-carousel-first-button&quot;</span>
<span class="c">             */</span>
            <span class="nx">FIRST_NAV</span><span class="o">:</span> <span class="s2">&quot; yui-carousel-first-button&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a first disabled navigation button.</span>
<span class="c">             *</span>
<span class="c">             * @property FIRST_NAV_DISABLED</span>
<span class="c">             * @default &quot;yui-carousel-first-button-disabled&quot;</span>
<span class="c">             */</span>
            <span class="nx">FIRST_NAV_DISABLED</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-first-button-disabled&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a first page element.</span>
<span class="c">             *</span>
<span class="c">             * @property FIRST_PAGE</span>
<span class="c">             * @default &quot;yui-carousel-nav-first-page&quot;</span>
<span class="c">             */</span>
            <span class="nx">FIRST_PAGE</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-nav-first-page&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the Carousel navigation button that has focus.</span>
<span class="c">             *</span>
<span class="c">             * @property FOCUSSED_BUTTON</span>
<span class="c">             * @default &quot;yui-carousel-button-focus&quot;</span>
<span class="c">             */</span>
            <span class="nx">FOCUSSED_BUTTON</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-button-focus&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a horizontally oriented Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property HORIZONTAL</span>
<span class="c">             * @default &quot;yui-carousel-horizontal&quot;</span>
<span class="c">             */</span>
            <span class="nx">HORIZONTAL</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-horizontal&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The element to be used as the progress indicator when the item</span>
<span class="c">             * is still being loaded.</span>
<span class="c">             *</span>
<span class="c">             * @property ITEM_LOADING</span>
<span class="c">             * @default The progress indicator (spinner) image CSS class</span>
<span class="c">             */</span>
            <span class="nx">ITEM_LOADING</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-item-loading&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name that will be set if the Carousel adjusts itself</span>
<span class="c">             * for a minimum width.</span>
<span class="c">             *</span>
<span class="c">             * @property MIN_WIDTH</span>
<span class="c">             * @default &quot;yui-carousel-min-width&quot;</span>
<span class="c">             */</span>
            <span class="nx">MIN_WIDTH</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-min-width&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The navigation element container class name.</span>
<span class="c">             *</span>
<span class="c">             * @property NAVIGATION</span>
<span class="c">             * @default &quot;yui-carousel-nav&quot;</span>
<span class="c">             */</span>
            <span class="nx">NAVIGATION</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-nav&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the next Carousel navigation button.</span>
<span class="c">             *</span>
<span class="c">             * @property NEXT_NAV</span>
<span class="c">             * @default &quot; yui-carousel-next-button&quot;</span>
<span class="c">             */</span>
            <span class="nx">NEXT_NAV</span><span class="o">:</span> <span class="s2">&quot; yui-carousel-next-button&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the next navigation link. This variable is</span>
<span class="c">             * not only used for styling, but also for identifying the link</span>
<span class="c">             * within the Carousel container.</span>
<span class="c">             *</span>
<span class="c">             * @property NEXT_PAGE</span>
<span class="c">             * @default &quot;yui-carousel-next&quot;</span>
<span class="c">             */</span>
            <span class="nx">NEXT_PAGE</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-next&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name for the navigation container for prev/next.</span>
<span class="c">             *</span>
<span class="c">             * @property NAV_CONTAINER</span>
<span class="c">             * @default &quot;yui-carousel-buttons&quot;</span>
<span class="c">             */</span>
            <span class="nx">NAV_CONTAINER</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-buttons&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the focussed page navigation.  This class is</span>
<span class="c">             * specifically used for the ugly focus handling in Opera.</span>
<span class="c">             *</span>
<span class="c">             * @property PAGE_FOCUS</span>
<span class="c">             * @default &quot;yui-carousel-nav-page-focus&quot;</span>
<span class="c">             */</span>
            <span class="nx">PAGE_FOCUS</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-nav-page-focus&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the previous navigation link. This variable</span>
<span class="c">             * is not only used for styling, but also for identifying the link</span>
<span class="c">             * within the Carousel container.</span>
<span class="c">             *</span>
<span class="c">             * @property PREV_PAGE</span>
<span class="c">             * @default &quot;yui-carousel-prev&quot;</span>
<span class="c">             */</span>
            <span class="nx">PREV_PAGE</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-prev&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the selected item.</span>
<span class="c">             *</span>
<span class="c">             * @property SELECTED_ITEM</span>
<span class="c">             * @default &quot;yui-carousel-item-selected&quot;</span>
<span class="c">             */</span>
            <span class="nx">SELECTED_ITEM</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-item-selected&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the selected paging navigation.</span>
<span class="c">             *</span>
<span class="c">             * @property SELECTED_NAV</span>
<span class="c">             * @default &quot;yui-carousel-nav-page-selected&quot;</span>
<span class="c">             */</span>
            <span class="nx">SELECTED_NAV</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-nav-page-selected&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a vertically oriented Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property VERTICAL</span>
<span class="c">             * @default &quot;yui-carousel-vertical&quot;</span>
<span class="c">             */</span>
            <span class="nx">VERTICAL</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-vertical&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of the (vertical) Carousel&#39;s container element.</span>
<span class="c">             *</span>
<span class="c">             * @property VERTICAL_CONTAINER</span>
<span class="c">             * @default &quot;yui-carousel-vertical-container&quot;</span>
<span class="c">             */</span>
            <span class="nx">VERTICAL_CONTAINER</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-vertical-container&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The class name of a visible Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property VISIBLE</span>
<span class="c">             * @default &quot;yui-carousel-visible&quot;</span>
<span class="c">             */</span>
            <span class="nx">VISIBLE</span><span class="o">:</span> <span class="s2">&quot;yui-carousel-visible&quot;</span>

        <span class="o">},</span>

        <span class="c">/*</span>
<span class="c">         * Configuration attributes for configuring the Carousel component</span>
<span class="c">         */</span>

        <span class="nx">CONFIG</span><span class="o">:</span> <span class="o">{</span>

            <span class="c">/**</span>
<span class="c">             * The offset of the first visible item in the Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property FIRST_VISIBLE</span>
<span class="c">             * @default 0</span>
<span class="c">             */</span>
            <span class="nx">FIRST_VISIBLE</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The minimum width of the horizontal Carousel container to support</span>
<span class="c">             * the navigation buttons.</span>
<span class="c">             *</span>
<span class="c">             * @property HORZ_MIN_WIDTH</span>
<span class="c">             * @default 180</span>
<span class="c">             */</span>
            <span class="nx">HORZ_MIN_WIDTH</span><span class="o">:</span> <span class="m">180</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The maximum number of pager buttons allowed beyond which the UI</span>
<span class="c">             * of the pager would be a drop-down of pages instead of buttons.</span>
<span class="c">             *</span>
<span class="c">             * @property MAX_PAGER_BUTTONS</span>
<span class="c">             * @default 5</span>
<span class="c">             */</span>
            <span class="nx">MAX_PAGER_BUTTONS</span><span class="o">:</span> <span class="m">5</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The minimum width of the vertical Carousel container to support</span>
<span class="c">             * the navigation buttons.</span>
<span class="c">             *</span>
<span class="c">             * @property VERT_MIN_WIDTH</span>
<span class="c">             * @default 99</span>
<span class="c">             */</span>
            <span class="nx">VERT_MIN_WIDTH</span><span class="o">:</span> <span class="m">99</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The number of visible items in the Carousel.</span>
<span class="c">             *</span>
<span class="c">             * @property NUM_VISIBLE</span>
<span class="c">             * @default 3</span>
<span class="c">             */</span>
            <span class="nx">NUM_VISIBLE</span><span class="o">:</span> <span class="m">3</span>

        <span class="o">},</span>

        <span class="c">/*</span>
<span class="c">         * Internationalizable strings in the Carousel component</span>
<span class="c">         */</span>

        <span class="nx">STRINGS</span><span class="o">:</span> <span class="o">{</span>

            <span class="c">/**</span>
<span class="c">             * The content to be used as the progress indicator when the item</span>
<span class="c">             * is still being loaded.</span>
<span class="c">             *</span>
<span class="c">             * @property ITEM_LOADING_CONTENT</span>
<span class="c">             * @default &quot;Loading&quot;</span>
<span class="c">             */</span>
            <span class="nx">ITEM_LOADING_CONTENT</span><span class="o">:</span> <span class="s2">&quot;Loading&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The next navigation button name/text.</span>
<span class="c">             *</span>
<span class="c">             * @property NEXT_BUTTON_TEXT</span>
<span class="c">             * @default &quot;Next Page&quot;</span>
<span class="c">             */</span>
            <span class="nx">NEXT_BUTTON_TEXT</span><span class="o">:</span> <span class="s2">&quot;Next Page&quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The prefix text for the pager in case the UI is a drop-down.</span>
<span class="c">             *</span>
<span class="c">             * @property PAGER_PREFIX_TEXT</span>
<span class="c">             * @default &quot;Go to page &quot;</span>
<span class="c">             */</span>
            <span class="nx">PAGER_PREFIX_TEXT</span><span class="o">:</span> <span class="s2">&quot;Go to page &quot;</span><span class="o">,</span>

            <span class="c">/**</span>
<span class="c">             * The previous navigation button name/text.</span>
<span class="c">             *</span>
<span class="c">             * @property PREVIOUS_BUTTON_TEXT</span>
<span class="c">             * @default &quot;Previous Page&quot;</span>
<span class="c">             */</span>
            <span class="nx">PREVIOUS_BUTTON_TEXT</span><span class="o">:</span> <span class="s2">&quot;Previous Page&quot;</span>

        <span class="o">},</span>

        <span class="c">/*</span>
<span class="c">         * Public methods of the Carousel component</span>
<span class="c">         */</span>

        <span class="c">/**</span>
<span class="c">         * Insert or append an item to the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method addItem</span>
<span class="c">         * @public</span>
<span class="c">         * @param item {String | Object | HTMLElement} The item to be appended</span>
<span class="c">         * to the Carousel. If the parameter is a string, it is assumed to be</span>
<span class="c">         * the content of the newly created item. If the parameter is an</span>
<span class="c">         * object, it is assumed to supply the content and an optional class</span>
<span class="c">         * and an optional id of the newly created item.</span>
<span class="c">         * @param index {Number} optional The position to where in the list</span>
<span class="c">         * (starts from zero).</span>
<span class="c">         * @return {Boolean} Return true on success, false otherwise</span>
<span class="c">         */</span>
        <span class="nx">addItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">item</span><span class="o">,</span> <span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">className</span><span class="o">,</span>
                <span class="nx">content</span><span class="o">,</span>
                <span class="nx">elId</span><span class="o">,</span>
                <span class="nx">numItems</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">item</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">item</span><span class="o">)</span> <span class="o">||</span> <span class="nx">item</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">content</span> <span class="o">=</span> <span class="nx">item</span><span class="o">.</span><span class="nx">nodeName</span> <span class="o">?</span> <span class="nx">item</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">:</span> <span class="nx">item</span><span class="o">;</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isObject</span><span class="o">(</span><span class="nx">item</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">content</span> <span class="o">=</span> <span class="nx">item</span><span class="o">.</span><span class="nx">content</span><span class="o">;</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Invalid argument to addItem&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">className</span> <span class="o">=</span> <span class="nx">item</span><span class="o">.</span><span class="nx">className</span> <span class="o">||</span> <span class="s2">&quot;&quot;</span><span class="o">;</span>
            <span class="nx">elId</span>      <span class="o">=</span> <span class="nx">item</span><span class="o">.</span><span class="nx">id</span> <span class="o">?</span> <span class="nx">item</span><span class="o">.</span><span class="nx">id</span> <span class="o">:</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">();</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">index</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">push</span><span class="o">({</span>
                        <span class="nx">item</span>      <span class="o">:</span> <span class="nx">content</span><span class="o">,</span>
                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">className</span><span class="o">,</span>
                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">elId</span>
                <span class="o">});</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="m">0</span> <span class="o">||</span> <span class="nx">index</span> <span class="o">&gt;=</span> <span class="nx">numItems</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Index out of bounds&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">splice</span><span class="o">(</span><span class="nx">index</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="o">{</span>
                        <span class="nx">item</span>      <span class="o">:</span> <span class="nx">content</span><span class="o">,</span>
                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">className</span><span class="o">,</span>
                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">elId</span>
                <span class="o">});</span>
            <span class="o">}</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span><span class="o">++;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">numItems</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">length</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">length</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">itemAddedEvent</span><span class="o">,</span> <span class="o">{</span> <span class="nx">pos</span><span class="o">:</span> <span class="nx">index</span><span class="o">,</span> <span class="nx">ev</span><span class="o">:</span> <span class="nx">itemAddedEvent</span> <span class="o">});</span>

            <span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Insert or append multiple items to the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method addItems</span>
<span class="c">         * @public</span>
<span class="c">         * @param items {Array} An array of items to be added with each item</span>
<span class="c">         * representing an item, index pair [{item, index}, ...]</span>
<span class="c">         * @return {Boolean} Return true on success, false otherwise</span>
<span class="c">         */</span>
        <span class="nx">addItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">items</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">i</span><span class="o">,</span> <span class="nx">n</span><span class="o">,</span> <span class="nx">rv</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">items</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">items</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">n</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">addItem</span><span class="o">(</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span><span class="o">][</span><span class="m">0</span><span class="o">],</span> <span class="nx">items</span><span class="o">[</span><span class="nx">i</span><span class="o">][</span><span class="m">1</span><span class="o">])</span> <span class="o">===</span> <span class="kc">false</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">rv</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Remove focus from the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method blur</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">blur</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">.</span><span class="nx">blur</span><span class="o">();</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">blurEvent</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Clears the items from Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method clearItems</span>
<span class="c">         * public</span>
<span class="c">         */</span>
        <span class="nx">clearItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>

            <span class="k">while</span> <span class="o">(</span><span class="nx">n</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">removeItem</span><span class="o">(</span><span class="m">0</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Item could not be removed - missing?&quot;</span><span class="o">,</span>
                              <span class="s2">&quot;warn&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="c">/*</span>
<span class="c">                    For dynamic loading, the numItems may be much larger than</span>
<span class="c">                    the actual number of items in the table.  So, set the</span>
<span class="c">                    numItems to zero, and break out of the loop if the table</span>
<span class="c">                    is already empty.</span>
<span class="c">                 */</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">,</span> <span class="m">0</span><span class="o">);</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">n</span><span class="o">--;</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">allItemsRemovedEvent</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set focus on the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method focus</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">focus</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">first</span><span class="o">,</span>
                <span class="nx">focusEl</span><span class="o">,</span>
                <span class="nx">isSelectionInvisible</span><span class="o">,</span>
                <span class="nx">itemsTable</span><span class="o">,</span>
                <span class="nx">last</span><span class="o">,</span>
                <span class="nx">numVisible</span><span class="o">,</span>
                <span class="nx">selectOnScroll</span><span class="o">,</span>
                <span class="nx">selected</span><span class="o">,</span>
                <span class="nx">selItem</span><span class="o">;</span>

            <span class="c">// Don&#39;t do anything if the Carousel is not rendered</span>
<span class="c"></span>            <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAnimating</span><span class="o">())</span> <span class="o">{</span>
                <span class="c">// this messes up real bad!</span>
<span class="c"></span>                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">selItem</span>              <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">);</span>
            <span class="nx">numVisible</span>           <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>
            <span class="nx">selectOnScroll</span>       <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">);</span>
            <span class="nx">selected</span>             <span class="o">=</span> <span class="o">(</span><span class="nx">selItem</span> <span class="o">&gt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">?</span>
                                   <span class="nx">carousel</span><span class="o">.</span><span class="nx">getItem</span><span class="o">(</span><span class="nx">selItem</span><span class="o">)</span> <span class="o">:</span> <span class="kc">null</span><span class="o">;</span>
            <span class="nx">first</span>                <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">);</span>
            <span class="nx">last</span>                 <span class="o">=</span> <span class="nx">first</span> <span class="o">+</span> <span class="nx">numVisible</span> <span class="o">-</span> <span class="m">1</span><span class="o">;</span>
            <span class="nx">isSelectionInvisible</span> <span class="o">=</span> <span class="o">(</span><span class="nx">selItem</span> <span class="o">&lt;</span> <span class="nx">first</span> <span class="o">||</span> <span class="nx">selItem</span> <span class="o">&gt;</span> <span class="nx">last</span><span class="o">);</span>
            <span class="nx">focusEl</span>              <span class="o">=</span> <span class="o">(</span><span class="nx">selected</span> <span class="o">&amp;&amp;</span> <span class="nx">selected</span><span class="o">.</span><span class="nx">id</span><span class="o">)</span> <span class="o">?</span>
                                   <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">selected</span><span class="o">.</span><span class="nx">id</span><span class="o">)</span> <span class="o">:</span> <span class="kc">null</span><span class="o">;</span>
            <span class="nx">itemsTable</span>           <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">selectOnScroll</span> <span class="o">&amp;&amp;</span> <span class="nx">isSelectionInvisible</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">focusEl</span> <span class="o">=</span> <span class="o">(</span><span class="nx">itemsTable</span> <span class="o">&amp;&amp;</span> <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span> <span class="o">&amp;&amp;</span>
                           <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">first</span><span class="o">])</span> <span class="o">?</span>
                        <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">first</span><span class="o">].</span><span class="nx">id</span><span class="o">)</span> <span class="o">:</span> <span class="kc">null</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">focusEl</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">try</span> <span class="o">{</span>
                    <span class="nx">focusEl</span><span class="o">.</span><span class="nx">focus</span><span class="o">();</span>
                <span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="nx">ex</span><span class="o">)</span> <span class="o">{</span>
                    <span class="c">// ignore focus errors</span>
<span class="c"></span>                <span class="o">}</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">focusEvent</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Hide the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method hide</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">hide</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">beforeHideEvent</span><span class="o">)</span> <span class="o">!==</span> <span class="kc">false</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">.</span><span class="nx">VISIBLE</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">hideEvent</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Initialize the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method init</span>
<span class="c">         * @public</span>
<span class="c">         * @param el {HTMLElement | String} The html element that represents</span>
<span class="c">         * the Carousel container.</span>
<span class="c">         * @param attrs {Object} The set of configuration attributes for</span>
<span class="c">         * creating the Carousel.</span>
<span class="c">         */</span>
        <span class="nx">init</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">elId</span>     <span class="o">=</span> <span class="nx">el</span><span class="o">,</span>  <span class="c">// save for a rainy day</span>
<span class="c"></span>                <span class="nx">parse</span>    <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="nx">el</span> <span class="o">+</span> <span class="s2">&quot; is neither an HTML element, nor a string&quot;</span><span class="o">,</span>
                        <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span>     <span class="o">=</span> <span class="o">{</span> <span class="nx">prev</span><span class="o">:</span> <span class="o">[],</span> <span class="nx">next</span><span class="o">:</span> <span class="o">[]</span> <span class="o">};</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span>       <span class="o">=</span> <span class="o">{</span> <span class="nx">el</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span> <span class="nx">num</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span> <span class="nx">cur</span><span class="o">:</span> <span class="m">0</span> <span class="o">};</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span>  <span class="o">=</span> <span class="o">{</span> <span class="nx">loading</span><span class="o">:</span> <span class="o">{},</span> <span class="nx">numItems</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span>
                                      <span class="nx">items</span><span class="o">:</span> <span class="o">[],</span> <span class="nx">size</span><span class="o">:</span> <span class="m">0</span> <span class="o">};</span>

            <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Component initialization&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">el</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="nx">el</span> <span class="o">+</span> <span class="s2">&quot; is neither an HTML element, nor a string&quot;</span><span class="o">,</span>
                        <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">Carousel</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">init</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">.</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span>   <span class="c">// in case the HTML element is passed</span>
<span class="c"></span>                    <span class="nx">el</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;id&quot;</span><span class="o">,</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">());</span>
                <span class="o">}</span>
                <span class="nx">parse</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_parseCarousel</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">parse</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_createCarousel</span><span class="o">(</span><span class="nx">elId</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_createCarousel</span><span class="o">(</span><span class="nx">elId</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="nx">elId</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">id</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">initEvents</span><span class="o">();</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">parse</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_parseCarouselItems</span><span class="o">();</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">attrs</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">isVertical</span> <span class="o">==</span> <span class="s2">&quot;undefined&quot;</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">,</span> <span class="kc">false</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_parseCarouselNavigation</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setupCarouselNavigation</span><span class="o">();</span>

            <span class="nx">instances</span><span class="o">[</span><span class="nx">elId</span><span class="o">]</span> <span class="o">=</span> <span class="o">{</span> <span class="nx">object</span><span class="o">:</span> <span class="nx">carousel</span> <span class="o">};</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_loadItems</span><span class="o">();</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Initialize the configuration attributes used to create the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method initAttributes</span>
<span class="c">         * @public</span>
<span class="c">         * @param attrs {Object} The set of configuration attributes for</span>
<span class="c">         * creating the Carousel.</span>
<span class="c">         */</span>
        <span class="nx">initAttributes</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">attrs</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="nx">attrs</span> <span class="o">=</span> <span class="nx">attrs</span> <span class="o">||</span> <span class="o">{};</span>
            <span class="nx">Carousel</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">initAttributes</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">attrs</span><span class="o">);</span>

            <span class="c">/**</span>
<span class="c">             * @attribute carouselEl</span>
<span class="c">             * @description The type of the Carousel element.</span>
<span class="c">             * @default OL</span>
<span class="c">             * @type Boolean</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;carouselEl&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">carouselEl</span> <span class="o">||</span> <span class="s2">&quot;OL&quot;</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute carouselItemEl</span>
<span class="c">             * @description The type of the list of items within the Carousel.</span>
<span class="c">             * @default LI</span>
<span class="c">             * @type Boolean</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;carouselItemEl&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">carouselItemEl</span> <span class="o">||</span> <span class="s2">&quot;LI&quot;</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute currentPage</span>
<span class="c">             * @description The current page number (read-only.)</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;currentPage&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">readOnly</span> <span class="o">:</span> <span class="kc">true</span><span class="o">,</span>
                    <span class="nx">value</span>    <span class="o">:</span> <span class="m">0</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute firstVisible</span>
<span class="c">             * @description The index to start the Carousel from (indexes begin</span>
<span class="c">             * from zero)</span>
<span class="c">             * @default 0</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setFirstVisible</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateFirstVisible</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span>
                        <span class="nx">attrs</span><span class="o">.</span><span class="nx">firstVisible</span> <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CONFIG</span><span class="o">.</span><span class="nx">FIRST_VISIBLE</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute selectOnScroll</span>
<span class="c">             * @description Set this to true to automatically set focus to</span>
<span class="c">             * follow scrolling in the Carousel.</span>
<span class="c">             * @default true</span>
<span class="c">             * @type Boolean</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isBoolean</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">selectOnScroll</span> <span class="o">||</span> <span class="kc">true</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute numVisible</span>
<span class="c">             * @description The number of visible items in the Carousel&#39;s</span>
<span class="c">             * viewport.</span>
<span class="c">             * @default 3</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setNumVisible</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateNumVisible</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">numVisible</span> <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CONFIG</span><span class="o">.</span><span class="nx">NUM_VISIBLE</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute numItems</span>
<span class="c">             * @description The number of items in the Carousel.</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setNumItems</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateNumItems</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute scrollIncrement</span>
<span class="c">             * @description The number of items to scroll by for arrow keys.</span>
<span class="c">             * @default 1</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;scrollIncrement&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateScrollIncrement</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">scrollIncrement</span> <span class="o">||</span> <span class="m">1</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute selectedItem</span>
<span class="c">             * @description The index of the selected item.</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setSelectedItem</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="o">-</span><span class="m">1</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute revealAmount</span>
<span class="c">             * @description The percentage of the item to be revealed on each</span>
<span class="c">             * side of the Carousel (before and after the first and last item</span>
<span class="c">             * in the Carousel&#39;s viewport.)</span>
<span class="c">             * @default 0</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;revealAmount&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setRevealAmount</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateRevealAmount</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">revealAmount</span> <span class="o">||</span> <span class="m">0</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute isCircular</span>
<span class="c">             * @description Set this to true to wrap scrolling of the contents</span>
<span class="c">             * in the Carousel.</span>
<span class="c">             * @default false</span>
<span class="c">             * @type Boolean</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isBoolean</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">isCircular</span> <span class="o">||</span> <span class="kc">false</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute isVertical</span>
<span class="c">             * @description True if the orientation of the Carousel is vertical</span>
<span class="c">             * @default false</span>
<span class="c">             * @type Boolean</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setOrientation</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isBoolean</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">isVertical</span> <span class="o">||</span> <span class="kc">false</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute navigation</span>
<span class="c">             * @description The set of navigation controls for Carousel</span>
<span class="c">             * @default &lt;br&gt;</span>
<span class="c">             * { prev: null, // the previous navigation element&lt;br&gt;</span>
<span class="c">             *   next: null } // the next navigation element</span>
<span class="c">             * @type Object</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;navigation&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">method</span>    <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setNavigation</span><span class="o">,</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateNavigation</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span>
                        <span class="nx">attrs</span><span class="o">.</span><span class="nx">navigation</span> <span class="o">||</span> <span class="o">{</span><span class="nx">prev</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span><span class="nx">next</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span><span class="nx">page</span><span class="o">:</span> <span class="kc">null</span><span class="o">}</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute animation</span>
<span class="c">             * @description The optional animation attributes for the Carousel.</span>
<span class="c">             * @default &lt;br&gt;</span>
<span class="c">             * { speed: 0, // the animation speed (in seconds)&lt;br&gt;</span>
<span class="c">             *   effect: null } // the animation effect (like</span>
<span class="c">             *   YAHOO.util.Easing.easeOut)</span>
<span class="c">             * @type Object</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;animation&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_validateAnimation</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">animation</span> <span class="o">||</span> <span class="o">{</span> <span class="nx">speed</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span> <span class="nx">effect</span><span class="o">:</span> <span class="kc">null</span> <span class="o">}</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute autoPlay</span>
<span class="c">             * @description Set this to time in milli-seconds to have the</span>
<span class="c">             * Carousel automatically scroll the contents.</span>
<span class="c">             * @type Number</span>
<span class="c">             * @deprecated Use autoPlayInterval instead.</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;autoPlay&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">autoPlay</span> <span class="o">||</span> <span class="m">0</span>
            <span class="o">});</span>

            <span class="c">/**</span>
<span class="c">             * @attribute autoPlayInterval</span>
<span class="c">             * @description The delay in milli-seconds for scrolling the</span>
<span class="c">             * Carousel during auto-play.</span>
<span class="c">             * Note: The startAutoPlay() method needs to be invoked to trigger</span>
<span class="c">             * automatic scrolling of Carousel.</span>
<span class="c">             * @type Number</span>
<span class="c">             */</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="s2">&quot;autoPlayInterval&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">validator</span> <span class="o">:</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">,</span>
                    <span class="nx">value</span>     <span class="o">:</span> <span class="nx">attrs</span><span class="o">.</span><span class="nx">autoPlayInterval</span> <span class="o">||</span> <span class="m">0</span>
            <span class="o">});</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Initialize and bind the event handlers.</span>
<span class="c">         *</span>
<span class="c">         * @method initEvents</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">initEvents</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">focussedLi</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s2">&quot;keydown&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_keyboardEventHandler</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">afterScrollEvent</span><span class="o">,</span> <span class="nx">syncNavigation</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">itemAddedEvent</span><span class="o">,</span> <span class="nx">syncUi</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">itemRemovedEvent</span><span class="o">,</span> <span class="nx">syncUi</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">itemSelectedEvent</span><span class="o">,</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasFocus</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">focus</span><span class="o">();</span>
                <span class="o">}</span>
            <span class="o">});</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">loadItemsEvent</span><span class="o">,</span> <span class="nx">syncUi</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">allItemsRemovedEvent</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="m">0</span><span class="o">);</span>
                <span class="nx">syncNavigation</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">);</span>
                <span class="nx">syncPagerUi</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">);</span>
            <span class="o">});</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">pageChangeEvent</span><span class="o">,</span> <span class="nx">syncPagerUi</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">renderEvent</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">));</span>
                <span class="nx">syncNavigation</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">ev</span><span class="o">);</span>
                <span class="nx">syncPagerUi</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">ev</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setClipContainerSize</span><span class="o">();</span>
            <span class="o">});</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s2">&quot;selectedItemChange&quot;</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">setItemSelection</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span><span class="o">,</span> <span class="nx">ev</span><span class="o">.</span><span class="nx">prevValue</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span> <span class="o">&gt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_updateTabIndex</span><span class="o">(</span>
                            <span class="nx">carousel</span><span class="o">.</span><span class="nx">getElementForItem</span><span class="o">(</span><span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span><span class="o">));</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">itemSelectedEvent</span><span class="o">,</span> <span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span><span class="o">);</span>
            <span class="o">});</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">uiUpdateEvent</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">syncNavigation</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">ev</span><span class="o">);</span>
                <span class="nx">syncPagerUi</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">ev</span><span class="o">);</span>
            <span class="o">});</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s2">&quot;firstVisibleChange&quot;</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span> <span class="o">&gt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_updateTabIndex</span><span class="o">(</span>
                                <span class="nx">carousel</span><span class="o">.</span><span class="nx">getElementForItem</span><span class="o">(</span><span class="nx">ev</span><span class="o">.</span><span class="nx">newValue</span><span class="o">));</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">});</span>

            <span class="c">// Handle item selection on mouse click</span>
<span class="c"></span>            <span class="nx">carousel</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAutoPlayOn</span><span class="o">())</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">stopAutoPlay</span><span class="o">();</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemClickHandler</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pagerClickHandler</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
            <span class="o">});</span>

            <span class="c">// Restore the focus on the navigation buttons</span>
<span class="c"></span>
            <span class="nx">Event</span><span class="o">.</span><span class="nx">onFocus</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">),</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">Event</span><span class="o">.</span><span class="nx">getTarget</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>

                <span class="k">if</span> <span class="o">(</span><span class="nx">target</span> <span class="o">&amp;&amp;</span> <span class="nx">target</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="s2">&quot;A&quot;</span> <span class="o">&amp;&amp;</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">getAncestorByClassName</span><span class="o">(</span><span class="nx">target</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">NAVIGATION</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">focussedLi</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">focussedLi</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">PAGE_FOCUS</span><span class="o">);</span>
                    <span class="o">}</span>
                    <span class="nx">focussedLi</span> <span class="o">=</span> <span class="nx">target</span><span class="o">.</span><span class="nx">parentNode</span><span class="o">;</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">focussedLi</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">PAGE_FOCUS</span><span class="o">);</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">focussedLi</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">focussedLi</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">PAGE_FOCUS</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>

                <span class="nx">obj</span><span class="o">.</span><span class="nx">_hasFocus</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="nx">obj</span><span class="o">.</span><span class="nx">_updateNavButtons</span><span class="o">(</span><span class="nx">Event</span><span class="o">.</span><span class="nx">getTarget</span><span class="o">(</span><span class="nx">ev</span><span class="o">),</span> <span class="kc">true</span><span class="o">);</span>
            <span class="o">},</span> <span class="nx">carousel</span><span class="o">);</span>

            <span class="nx">Event</span><span class="o">.</span><span class="nx">onBlur</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">),</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">obj</span><span class="o">.</span><span class="nx">_hasFocus</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="nx">obj</span><span class="o">.</span><span class="nx">_updateNavButtons</span><span class="o">(</span><span class="nx">Event</span><span class="o">.</span><span class="nx">getTarget</span><span class="o">(</span><span class="nx">ev</span><span class="o">),</span> <span class="kc">false</span><span class="o">);</span>
            <span class="o">},</span> <span class="nx">carousel</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return true if the Carousel is still animating, or false otherwise.</span>
<span class="c">         *</span>
<span class="c">         * @method isAnimating</span>
<span class="c">         * @return {Boolean} Return true if animation is still in progress, or</span>
<span class="c">         * false otherwise.</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">isAnimating</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_isAnimationInProgress</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return true if the auto-scrolling of Carousel is &quot;on&quot;, or false</span>
<span class="c">         * otherwise.</span>
<span class="c">         *</span>
<span class="c">         * @method isAutoPlayOn</span>
<span class="c">         * @return {Boolean} Return true if autoPlay is &quot;on&quot;, or false</span>
<span class="c">         * otherwise.</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">isAutoPlayOn</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_isAutoPlayInProgress</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return the carouselItemEl at index or null if the index is not</span>
<span class="c">         * found.</span>
<span class="c">         *</span>
<span class="c">         * @method getElementForItem</span>
<span class="c">         * @param index {Number} The index of the item to be returned</span>
<span class="c">         * @return {Element} Return the item at index or null if not found</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getElementForItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="m">0</span> <span class="o">||</span> <span class="nx">index</span> <span class="o">&gt;=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Index out of bounds&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="c">// TODO: may be cache the item</span>
<span class="c"></span>            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">&gt;</span> <span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">index</span><span class="o">]))</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">index</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return the carouselItemEl for all items in the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method getElementForItems</span>
<span class="c">         * @return {Array} Return all the items</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getElementForItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">els</span> <span class="o">=</span> <span class="o">[],</span> <span class="nx">i</span><span class="o">;</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                <span class="nx">els</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">getElementForItem</span><span class="o">(</span><span class="nx">i</span><span class="o">));</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">els</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return the item at index or null if the index is not found.</span>
<span class="c">         *</span>
<span class="c">         * @method getItem</span>
<span class="c">         * @param index {Number} The index of the item to be returned</span>
<span class="c">         * @return {Object} Return the item at index or null if not found</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="m">0</span> <span class="o">||</span> <span class="nx">index</span> <span class="o">&gt;=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Index out of bounds&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">&gt;</span> <span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">index</span><span class="o">]))</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">index</span><span class="o">];</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return all items as an array.</span>
<span class="c">         *</span>
<span class="c">         * @method getItems</span>
<span class="c">         * @return {Array} Return all items in the Carousel</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return the position of the Carousel item that has the id &quot;id&quot;, or -1</span>
<span class="c">         * if the id is not found.</span>
<span class="c">         *</span>
<span class="c">         * @method getItemPositionById</span>
<span class="c">         * @param index {Number} The index of the item to be returned</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getItemPositionById</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">,</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span><span class="o">;</span>

            <span class="k">while</span> <span class="o">(</span><span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">n</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span><span class="o">]))</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">id</span><span class="o">)</span> <span class="o">{</span>
                        <span class="k">return</span> <span class="nx">i</span><span class="o">;</span>
                    <span class="o">}</span>
                <span class="o">}</span>
                <span class="nx">i</span><span class="o">++;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="o">-</span><span class="m">1</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return all visible items as an array.</span>
<span class="c">         *</span>
<span class="c">         * @method getVisibleItems</span>
<span class="c">         * @return {Array} The array of visible items</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">getVisibleItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">i</span>        <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">),</span>
                <span class="nx">n</span>        <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">),</span>
                <span class="nx">r</span>        <span class="o">=</span> <span class="o">[];</span>

            <span class="k">while</span> <span class="o">(</span><span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">n</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">r</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">getElementForItem</span><span class="o">(</span><span class="nx">i</span><span class="o">));</span>
                <span class="nx">i</span><span class="o">++;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">r</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Remove an item at index from the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method removeItem</span>
<span class="c">         * @public</span>
<span class="c">         * @param index {Number} The position to where in the list (starts from</span>
<span class="c">         * zero).</span>
<span class="c">         * @return {Boolean} Return true on success, false otherwise</span>
<span class="c">         */</span>
        <span class="nx">removeItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">item</span><span class="o">,</span>
                <span class="nx">num</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="m">0</span> <span class="o">||</span> <span class="nx">index</span> <span class="o">&gt;=</span> <span class="nx">num</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Index out of bounds&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">splice</span><span class="o">(</span><span class="nx">index</span><span class="o">,</span> <span class="m">1</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">item</span> <span class="o">&amp;&amp;</span> <span class="nx">item</span><span class="o">.</span><span class="nx">length</span> <span class="o">==</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span><span class="o">--;</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">,</span> <span class="nx">num</span> <span class="o">-</span> <span class="m">1</span><span class="o">);</span>

                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">itemRemovedEvent</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">item</span><span class="o">:</span> <span class="nx">item</span><span class="o">[</span><span class="m">0</span><span class="o">],</span> <span class="nx">pos</span><span class="o">:</span> <span class="nx">index</span><span class="o">,</span> <span class="nx">ev</span><span class="o">:</span> <span class="nx">itemRemovedEvent</span> <span class="o">});</span>
                <span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Render the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method render</span>
<span class="c">         * @public</span>
<span class="c">         * @param appendTo {HTMLElement | String} The element to which the</span>
<span class="c">         * Carousel should be appended prior to rendering.</span>
<span class="c">         * @return {Boolean} Status of the operation</span>
<span class="c">         */</span>
        <span class="nx">render</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">appendTo</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">CAROUSEL</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_createCarouselClip</span><span class="o">();</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">appendTo</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">appendTo</span><span class="o">(</span><span class="nx">appendTo</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">inDocument</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">)))</span> <span class="o">{</span>
                    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Nothing to render. The container should be &quot;</span> <span class="o">+</span>
                            <span class="s2">&quot;within the document if appendTo is not &quot;</span>       <span class="o">+</span>
                            <span class="s2">&quot;specified&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">VERTICAL</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">HORIZONTAL</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">)</span> <span class="o">&lt;</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;No items in the Carousel to render&quot;</span><span class="o">,</span> <span class="s2">&quot;warn&quot;</span><span class="o">,</span>
                        <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_refreshUi</span><span class="o">();</span>

            <span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Scroll the Carousel by an item backward.</span>
<span class="c">         *</span>
<span class="c">         * @method scrollBackward</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">scrollBackward</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">-</span>
                              <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;scrollIncrement&quot;</span><span class="o">));</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Scroll the Carousel by an item forward.</span>
<span class="c">         *</span>
<span class="c">         * @method scrollForward</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">scrollForward</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">+</span>
                              <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;scrollIncrement&quot;</span><span class="o">));</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Scroll the Carousel by a page backward.</span>
<span class="c">         *</span>
<span class="c">         * @method scrollPageBackward</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">scrollPageBackward</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">item</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">-</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getValidIndex</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Scroll the Carousel by a page forward.</span>
<span class="c">         *</span>
<span class="c">         * @method scrollPageForward</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">scrollPageForward</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">item</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">+</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectOnScroll&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getValidIndex</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">item</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Scroll the Carousel to make the item the first visible item.</span>
<span class="c">         *</span>
<span class="c">         * @method scrollTo</span>
<span class="c">         * @public</span>
<span class="c">         * @param item Number The index of the element to position at.</span>
<span class="c">         * @param dontSelect Boolean True if select should be avoided</span>
<span class="c">         */</span>
        <span class="nx">scrollTo</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">item</span><span class="o">,</span> <span class="nx">dontSelect</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">animate</span><span class="o">,</span> <span class="nx">animCfg</span><span class="o">,</span> <span class="nx">isCircular</span><span class="o">,</span> <span class="nx">delta</span><span class="o">,</span> <span class="nx">direction</span><span class="o">,</span> <span class="nx">firstItem</span><span class="o">,</span>
                <span class="nx">numItems</span><span class="o">,</span> <span class="nx">numPerPage</span><span class="o">,</span> <span class="nx">offset</span><span class="o">,</span> <span class="nx">page</span><span class="o">,</span> <span class="nx">rv</span><span class="o">,</span> <span class="nx">sentinel</span><span class="o">,</span>
                <span class="nx">stopAutoScroll</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">item</span><span class="o">)</span> <span class="o">||</span> <span class="nx">item</span> <span class="o">==</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">||</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">isAnimating</span><span class="o">())</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>         <span class="c">// nothing to do!</span>
<span class="c"></span>            <span class="o">}</span>

            <span class="nx">animCfg</span>        <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;animation&quot;</span><span class="o">);</span>
            <span class="nx">isCircular</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">);</span>
            <span class="nx">firstItem</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span><span class="o">;</span>
            <span class="nx">numItems</span>       <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>
            <span class="nx">numPerPage</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>
            <span class="nx">page</span>           <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;currentPage&quot;</span><span class="o">);</span>
            <span class="nx">stopAutoScroll</span> <span class="o">=</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAutoPlayOn</span><span class="o">())</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">stopAutoPlay</span><span class="o">();</span>
                <span class="o">}</span>
            <span class="o">};</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">item</span> <span class="o">&lt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">isCircular</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">item</span> <span class="o">=</span> <span class="nx">numItems</span> <span class="o">+</span> <span class="nx">item</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">stopAutoScroll</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">);</span>
                    <span class="k">return</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">numItems</span> <span class="o">&gt;</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">item</span> <span class="o">&gt;</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">item</span> <span class="o">=</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="nx">item</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">stopAutoScroll</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">);</span>
                    <span class="k">return</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="nx">direction</span> <span class="o">=</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">&gt;</span> <span class="nx">item</span><span class="o">)</span> <span class="o">?</span> <span class="s2">&quot;backward&quot;</span> <span class="o">:</span> <span class="s2">&quot;forward&quot;</span><span class="o">;</span>

            <span class="nx">sentinel</span>  <span class="o">=</span> <span class="nx">firstItem</span> <span class="o">+</span> <span class="nx">numPerPage</span><span class="o">;</span>
            <span class="nx">sentinel</span>  <span class="o">=</span> <span class="o">(</span><span class="nx">sentinel</span> <span class="o">&gt;</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span><span class="o">)</span> <span class="o">?</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span> <span class="o">:</span> <span class="nx">sentinel</span><span class="o">;</span>
            <span class="nx">rv</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">beforeScrollEvent</span><span class="o">,</span>
                    <span class="o">{</span> <span class="nx">dir</span><span class="o">:</span> <span class="nx">direction</span><span class="o">,</span> <span class="nx">first</span><span class="o">:</span> <span class="nx">firstItem</span><span class="o">,</span> <span class="nx">last</span><span class="o">:</span> <span class="nx">sentinel</span> <span class="o">});</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">rv</span> <span class="o">===</span> <span class="kc">false</span><span class="o">)</span> <span class="o">{</span> <span class="c">// scrolling is prevented</span>
<span class="c"></span>                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">beforePageChangeEvent</span><span class="o">,</span> <span class="o">{</span> <span class="nx">page</span><span class="o">:</span> <span class="nx">page</span> <span class="o">});</span>

            <span class="nx">delta</span> <span class="o">=</span> <span class="nx">firstItem</span> <span class="o">-</span> <span class="nx">item</span><span class="o">;</span> <span class="c">// yes, the delta is reverse</span>
<span class="c"></span>            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span> <span class="o">=</span> <span class="nx">item</span><span class="o">;</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">,</span> <span class="nx">item</span><span class="o">);</span>

            <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Scrolling to &quot;</span> <span class="o">+</span> <span class="nx">item</span> <span class="o">+</span> <span class="s2">&quot; delta = &quot;</span> <span class="o">+</span> <span class="nx">delta</span><span class="o">,</span><span class="nx">WidgetName</span><span class="o">);</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_loadItems</span><span class="o">();</span> <span class="c">// do we have all the items to display?</span>
<span class="c"></span>
            <span class="nx">sentinel</span>  <span class="o">=</span> <span class="nx">item</span> <span class="o">+</span> <span class="nx">numPerPage</span><span class="o">;</span>
            <span class="nx">sentinel</span>  <span class="o">=</span> <span class="o">(</span><span class="nx">sentinel</span> <span class="o">&gt;</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span><span class="o">)</span> <span class="o">?</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span> <span class="o">:</span> <span class="nx">sentinel</span><span class="o">;</span>

            <span class="nx">offset</span>    <span class="o">=</span> <span class="nx">getScrollOffset</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">delta</span><span class="o">);</span>
            <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Scroll offset = &quot;</span> <span class="o">+</span> <span class="nx">offset</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>

            <span class="nx">animate</span>   <span class="o">=</span> <span class="nx">animCfg</span><span class="o">.</span><span class="nx">speed</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">animate</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_animateAndSetCarouselOffset</span><span class="o">(</span><span class="nx">offset</span><span class="o">,</span> <span class="nx">item</span><span class="o">,</span> <span class="nx">sentinel</span><span class="o">,</span>
                        <span class="nx">dontSelect</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setCarouselOffset</span><span class="o">(</span><span class="nx">offset</span><span class="o">);</span>
                <span class="nx">updateStateAfterScroll</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">item</span><span class="o">,</span> <span class="nx">sentinel</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Select the previous item in the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method selectPreviousItem</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">selectPreviousItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">newpos</span>   <span class="o">=</span> <span class="m">0</span><span class="o">,</span>
                <span class="nx">selected</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">selected</span> <span class="o">==</span> <span class="k">this</span><span class="o">.</span><span class="nx">_firstItem</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">selected</span> <span class="o">-</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">selected</span><span class="o">-</span><span class="m">1</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">newpos</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">-</span>
                         <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;scrollIncrement&quot;</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">newpos</span><span class="o">));</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Select the next item in the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method selectNextItem</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">selectNextItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">newpos</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>

            <span class="nx">newpos</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">+</span>
                     <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;scrollIncrement&quot;</span><span class="o">);</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">newpos</span><span class="o">));</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Display the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method show</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">show</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">beforeShowEvent</span><span class="o">)</span> <span class="o">!==</span> <span class="kc">false</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">VISIBLE</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">showEvent</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Start auto-playing the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method startAutoPlay</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">startAutoPlay</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">timer</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">timer</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;autoPlayInterval&quot;</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">timer</span> <span class="o">&lt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">return</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_isAutoPlayInProgress</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">startAutoPlayEvent</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="o">(</span><span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoScroll</span><span class="o">();</span>
                <span class="o">},</span> <span class="nx">timer</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Stop auto-playing the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method stopAutoPlay</span>
<span class="c">         * @public</span>
<span class="c">         */</span>
        <span class="nx">stopAutoPlay</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">clearTimeout</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">);</span>
                <span class="nx">delete</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_autoPlayTimer</span><span class="o">;</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_isAutoPlayInProgress</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">stopAutoPlayEvent</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return the string representation of the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method toString</span>
<span class="c">         * @public</span>
<span class="c">         * @return {String}</span>
<span class="c">         */</span>
        <span class="nx">toString</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">return</span> <span class="nx">WidgetName</span> <span class="o">+</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span> <span class="o">?</span> <span class="s2">&quot; (#&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;id&quot;</span><span class="o">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/*</span>
<span class="c">         * Protected methods of the Carousel component</span>
<span class="c">         */</span>

        <span class="c">/**</span>
<span class="c">         * Set the Carousel offset to the passed offset after animating.</span>
<span class="c">         *</span>
<span class="c">         * @method _animateAndSetCarouselOffset</span>
<span class="c">         * @param {Integer} offset The offset to which the Carousel has to be</span>
<span class="c">         * scrolled to.</span>
<span class="c">         * @param {Integer} item The index to which the Carousel will scroll.</span>
<span class="c">         * @param {Integer} sentinel The last element in the view port.</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_animateAndSetCarouselOffset</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">offset</span><span class="o">,</span> <span class="nx">item</span><span class="o">,</span> <span class="nx">sentinel</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">animCfg</span>  <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;animation&quot;</span><span class="o">),</span>
                <span class="nx">animObj</span>  <span class="o">=</span> <span class="kc">null</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">animObj</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Motion</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">points</span><span class="o">:</span> <span class="o">{</span> <span class="nx">by</span><span class="o">:</span> <span class="o">[</span><span class="m">0</span><span class="o">,</span> <span class="nx">offset</span><span class="o">]</span> <span class="o">}</span> <span class="o">},</span>
                        <span class="nx">animCfg</span><span class="o">.</span><span class="nx">speed</span><span class="o">,</span> <span class="nx">animCfg</span><span class="o">.</span><span class="nx">effect</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">animObj</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Motion</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">points</span><span class="o">:</span> <span class="o">{</span> <span class="nx">by</span><span class="o">:</span> <span class="o">[</span><span class="nx">offset</span><span class="o">,</span> <span class="m">0</span><span class="o">]</span> <span class="o">}</span> <span class="o">},</span>
                        <span class="nx">animCfg</span><span class="o">.</span><span class="nx">speed</span><span class="o">,</span> <span class="nx">animCfg</span><span class="o">.</span><span class="nx">effect</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_isAnimationInProgress</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
            <span class="nx">animObj</span><span class="o">.</span><span class="nx">onComplete</span><span class="o">.</span><span class="nx">subscribe</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_animationCompleteHandler</span><span class="o">,</span>
                                         <span class="o">{</span> <span class="nx">scope</span><span class="o">:</span> <span class="nx">carousel</span><span class="o">,</span> <span class="nx">item</span><span class="o">:</span> <span class="nx">item</span><span class="o">,</span>
                                           <span class="nx">last</span><span class="o">:</span> <span class="nx">sentinel</span> <span class="o">});</span>
            <span class="nx">animObj</span><span class="o">.</span><span class="nx">animate</span><span class="o">();</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Handle the animation complete event.</span>
<span class="c">         *</span>
<span class="c">         * @method _animationCompleteHandler</span>
<span class="c">         * @param {Event} ev The event.</span>
<span class="c">         * @param {Array} p The event parameters.</span>
<span class="c">         * @param {Object} o The object that has the state of the Carousel</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_animationCompleteHandler</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="nx">p</span><span class="o">,</span> <span class="nx">o</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">o</span><span class="o">.</span><span class="nx">scope</span><span class="o">.</span><span class="nx">_isAnimationInProgress</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
            <span class="nx">updateStateAfterScroll</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">scope</span><span class="o">,</span> <span class="nx">o</span><span class="o">.</span><span class="nx">item</span><span class="o">,</span> <span class="nx">o</span><span class="o">.</span><span class="nx">last</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Automatically scroll the contents of the Carousel.</span>
<span class="c">         * @method _autoScroll</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_autoScroll</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>  <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">currIndex</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_firstItem</span><span class="o">,</span>
                <span class="nx">index</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">currIndex</span> <span class="o">&gt;=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">)</span> <span class="o">-</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">index</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">stopAutoPlay</span><span class="o">();</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">index</span> <span class="o">=</span> <span class="nx">currIndex</span> <span class="o">+</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">index</span><span class="o">);</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">index</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Create the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method createCarousel</span>
<span class="c">         * @param elId {String} The id of the element to be created</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_createCarousel</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">elId</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">el</span>       <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">elId</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;DIV&quot;</span><span class="o">,</span> <span class="o">{</span>
                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">CAROUSEL</span><span class="o">,</span>
                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">elId</span>
                <span class="o">});</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">=</span><span class="nx">createElement</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselEl&quot;</span><span class="o">),</span>
                        <span class="o">{</span> <span class="nx">className</span><span class="o">:</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">CAROUSEL_EL</span> <span class="o">});</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">el</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Create the Carousel clip container.</span>
<span class="c">         *</span>
<span class="c">         * @method createCarouselClip</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_createCarouselClip</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">return</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;DIV&quot;</span><span class="o">,</span> <span class="o">{</span> <span class="nx">className</span><span class="o">:</span> <span class="k">this</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">.</span><span class="nx">CONTENT</span> <span class="o">});</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Create the Carousel item.</span>
<span class="c">         *</span>
<span class="c">         * @method createCarouselItem</span>
<span class="c">         * @param obj {Object} The attributes of the element to be created</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_createCarouselItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span> <span class="nx">createElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselItemEl&quot;</span><span class="o">),</span> <span class="o">{</span>
                    <span class="nx">className</span> <span class="o">:</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">className</span><span class="o">,</span>
                    <span class="nx">content</span>   <span class="o">:</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">content</span><span class="o">,</span>
                    <span class="nx">id</span>        <span class="o">:</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">id</span>
            <span class="o">});</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Return a valid item for a possibly out of bounds index considering</span>
<span class="c">         * the isCircular property.</span>
<span class="c">         *</span>
<span class="c">         * @method _getValidIndex</span>
<span class="c">         * @param index {Number} The index of the item to be returned</span>
<span class="c">         * @return {Object} Return a valid item index</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_getValidIndex</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">index</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">isCircular</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">),</span>
                <span class="nx">numItems</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">),</span>
                <span class="nx">sentinel</span>   <span class="o">=</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">index</span> <span class="o">=</span> <span class="nx">isCircular</span> <span class="o">?</span> <span class="nx">numItems</span> <span class="o">+</span> <span class="nx">index</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">index</span> <span class="o">&gt;</span> <span class="nx">sentinel</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">index</span> <span class="o">=</span> <span class="nx">isCircular</span> <span class="o">?</span> <span class="nx">index</span> <span class="o">-</span> <span class="nx">numItems</span> <span class="o">:</span> <span class="nx">sentinel</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">index</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Get the value for the selected item.</span>
<span class="c">         *</span>
<span class="c">         * @method _getSelectedItem</span>
<span class="c">         * @param val {Number} The new value for &quot;selected&quot; item</span>
<span class="c">         * @return {Number} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_getSelectedItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">isCircular</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isCircular&quot;</span><span class="o">),</span>
                <span class="nx">numItems</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">),</span>
                <span class="nx">sentinel</span>   <span class="o">=</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&lt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">isCircular</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">val</span> <span class="o">=</span> <span class="nx">numItems</span> <span class="o">+</span> <span class="nx">val</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">val</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;</span> <span class="nx">sentinel</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">isCircular</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">-</span> <span class="nx">numItems</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">val</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * The &quot;click&quot; handler for the item.</span>
<span class="c">         *</span>
<span class="c">         * @method _itemClickHandler</span>
<span class="c">         * @param {Event} ev The event object</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_itemClickHandler</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>  <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">container</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">),</span>
                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">item</span><span class="o">,</span>
                <span class="nx">target</span>    <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Event</span><span class="o">.</span><span class="nx">getTarget</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>

            <span class="k">while</span> <span class="o">(</span><span class="nx">target</span> <span class="o">&amp;&amp;</span> <span class="nx">target</span> <span class="o">!=</span> <span class="nx">container</span> <span class="o">&amp;&amp;</span>
                   <span class="nx">target</span><span class="o">.</span><span class="nx">id</span> <span class="o">!=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">target</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">;</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselItemEl&quot;</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">target</span> <span class="o">=</span> <span class="nx">target</span><span class="o">.</span><span class="nx">parentNode</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">((</span><span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">getItemPositionById</span><span class="o">(</span><span class="nx">target</span><span class="o">.</span><span class="nx">id</span><span class="o">))</span> <span class="o">&gt;=</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Setting selection to &quot;</span> <span class="o">+</span> <span class="nx">item</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_getSelectedItem</span><span class="o">(</span><span class="nx">item</span><span class="o">));</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">focus</span><span class="o">();</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * The keyboard event handler for Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method _keyboardEventHandler</span>
<span class="c">         * @param ev {Event} The event that is being handled.</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_keyboardEventHandler</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">key</span>      <span class="o">=</span> <span class="nx">Event</span><span class="o">.</span><span class="nx">getCharCode</span><span class="o">(</span><span class="nx">ev</span><span class="o">),</span>
                <span class="nx">prevent</span>  <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAnimating</span><span class="o">())</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>         <span class="c">// do not mess while animation is in progress</span>
<span class="c"></span>            <span class="o">}</span>

            <span class="nx">switch</span> <span class="o">(</span><span class="nx">key</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">case</span> <span class="m">0</span><span class="nx">x25</span><span class="o">:</span>          <span class="c">// left arrow</span>
<span class="c"></span>            <span class="nx">case</span> <span class="m">0</span><span class="nx">x26</span><span class="o">:</span>          <span class="c">// up arrow</span>
<span class="c"></span>                <span class="nx">carousel</span><span class="o">.</span><span class="nx">selectPreviousItem</span><span class="o">();</span>
                <span class="nx">prevent</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="k">break</span><span class="o">;</span>
            <span class="nx">case</span> <span class="m">0</span><span class="nx">x27</span><span class="o">:</span>          <span class="c">// right arrow</span>
<span class="c"></span>            <span class="nx">case</span> <span class="m">0</span><span class="nx">x28</span><span class="o">:</span>          <span class="c">// down arrow</span>
<span class="c"></span>                <span class="nx">carousel</span><span class="o">.</span><span class="nx">selectNextItem</span><span class="o">();</span>
                <span class="nx">prevent</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="k">break</span><span class="o">;</span>
            <span class="nx">case</span> <span class="m">0</span><span class="nx">x21</span><span class="o">:</span>          <span class="c">// page-up</span>
<span class="c"></span>                <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollPageBackward</span><span class="o">();</span>
                <span class="nx">prevent</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="k">break</span><span class="o">;</span>
            <span class="nx">case</span> <span class="m">0</span><span class="nx">x22</span><span class="o">:</span>          <span class="c">// page-down</span>
<span class="c"></span>                <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollPageForward</span><span class="o">();</span>
                <span class="nx">prevent</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                <span class="k">break</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">prevent</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">isAutoPlayOn</span><span class="o">())</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">stopAutoPlay</span><span class="o">();</span>
                <span class="o">}</span>
                <span class="nx">Event</span><span class="o">.</span><span class="nx">preventDefault</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * The load the required set of items that are needed for display.</span>
<span class="c">         *</span>
<span class="c">         * @method _loadItems</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_loadItems</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">first</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">),</span>
                <span class="nx">last</span>       <span class="o">=</span> <span class="m">0</span><span class="o">,</span>
                <span class="nx">numItems</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">),</span>
                <span class="nx">numVisible</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">),</span>
                <span class="nx">reveal</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;revealAmount&quot;</span><span class="o">);</span>

            <span class="nx">last</span> <span class="o">=</span> <span class="nx">first</span> <span class="o">+</span> <span class="nx">numVisible</span> <span class="o">-</span> <span class="m">1</span> <span class="o">+</span> <span class="o">(</span><span class="nx">reveal</span> <span class="o">?</span> <span class="m">1</span> <span class="o">:</span> <span class="m">0</span><span class="o">);</span>
            <span class="nx">last</span> <span class="o">=</span> <span class="nx">last</span> <span class="o">&gt;</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span> <span class="o">?</span> <span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span> <span class="o">:</span> <span class="nx">last</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">getItem</span><span class="o">(</span><span class="nx">first</span><span class="o">)</span> <span class="o">||</span> <span class="o">!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">getItem</span><span class="o">(</span><span class="nx">last</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">loadItemsEvent</span><span class="o">,</span> <span class="o">{</span>
                        <span class="nx">ev</span><span class="o">:</span> <span class="nx">loadItemsEvent</span><span class="o">,</span> <span class="nx">first</span><span class="o">:</span> <span class="nx">first</span><span class="o">,</span> <span class="nx">last</span><span class="o">:</span> <span class="nx">last</span><span class="o">,</span>
                        <span class="nx">num</span><span class="o">:</span> <span class="nx">last</span> <span class="o">-</span> <span class="nx">first</span>
                <span class="o">});</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * The &quot;click&quot; handler for the pager navigation.</span>
<span class="c">         *</span>
<span class="c">         * @method _pagerClickHandler</span>
<span class="c">         * @param {Event} ev The event object</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_pagerClickHandler</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">ev</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">pos</span><span class="o">,</span>
                <span class="nx">target</span>   <span class="o">=</span> <span class="nx">Event</span><span class="o">.</span><span class="nx">getTarget</span><span class="o">(</span><span class="nx">ev</span><span class="o">),</span>
                <span class="nx">val</span><span class="o">;</span>

            <span class="k">function</span> <span class="nx">getPagerNode</span><span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">var</span> <span class="nx">itemEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselItemEl&quot;</span><span class="o">);</span>

                <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="nx">itemEl</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">())</span> <span class="o">{</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getChildrenBy</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="k">function</span> <span class="o">(</span><span class="nx">node</span><span class="o">)</span> <span class="o">{</span>
                        <span class="c">// either an anchor or select at least</span>
<span class="c"></span>                        <span class="k">return</span> <span class="nx">node</span><span class="o">.</span><span class="nx">href</span> <span class="o">||</span> <span class="nx">node</span><span class="o">.</span><span class="nx">value</span><span class="o">;</span>
                    <span class="o">});</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">el</span> <span class="o">&amp;&amp;</span> <span class="nx">el</span><span class="o">[</span><span class="m">0</span><span class="o">])</span> <span class="o">{</span>
                        <span class="k">return</span> <span class="nx">el</span><span class="o">[</span><span class="m">0</span><span class="o">];</span>
                    <span class="o">}</span>
                <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">href</span> <span class="o">||</span> <span class="nx">el</span><span class="o">.</span><span class="nx">value</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="nx">el</span><span class="o">;</span>
                <span class="o">}</span>

                <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">target</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">target</span> <span class="o">=</span> <span class="nx">getPagerNode</span><span class="o">(</span><span class="nx">target</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">target</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">return</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nx">target</span><span class="o">.</span><span class="nx">href</span> <span class="o">||</span> <span class="nx">target</span><span class="o">.</span><span class="nx">value</span><span class="o">;</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">pos</span> <span class="o">=</span> <span class="nx">val</span><span class="o">.</span><span class="nx">lastIndexOf</span><span class="o">(</span><span class="s2">&quot;#&quot;</span><span class="o">);</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">pos</span> <span class="o">!=</span> <span class="o">-</span><span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">val</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">getItemPositionById</span><span class="o">(</span>
                                <span class="nx">val</span><span class="o">.</span><span class="nx">substring</span><span class="o">(</span><span class="nx">pos</span> <span class="o">+</span> <span class="m">1</span><span class="o">));</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">val</span><span class="o">;</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">val</span><span class="o">);</span>
                        <span class="k">if</span> <span class="o">(!</span><span class="nx">target</span><span class="o">.</span><span class="nx">value</span><span class="o">)</span> <span class="o">{</span> <span class="c">// not a select element</span>
<span class="c"></span>                            <span class="nx">carousel</span><span class="o">.</span><span class="nx">focus</span><span class="o">();</span>
                        <span class="o">}</span>
                        <span class="nx">Event</span><span class="o">.</span><span class="nx">preventDefault</span><span class="o">(</span><span class="nx">ev</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Find the Carousel within a container. The Carousel is identified by</span>
<span class="c">         * the first element that matches the carousel element tag or the</span>
<span class="c">         * element that has the Carousel class.</span>
<span class="c">         *</span>
<span class="c">         * @method parseCarousel</span>
<span class="c">         * @param parent {HTMLElement} The parent element to look under</span>
<span class="c">         * @return {Boolean} True if Carousel is found, false otherwise</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_parseCarousel</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">parent</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">child</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">,</span> <span class="nx">domEl</span><span class="o">,</span> <span class="nx">found</span><span class="o">,</span> <span class="nx">node</span><span class="o">;</span>

            <span class="nx">cssClass</span>  <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">;</span>
            <span class="nx">domEl</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselEl&quot;</span><span class="o">);</span>
            <span class="nx">found</span>     <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">child</span> <span class="o">=</span> <span class="nx">parent</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">;</span> <span class="nx">child</span><span class="o">;</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">child</span><span class="o">.</span><span class="nx">nextSibling</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">child</span><span class="o">.</span><span class="nx">nodeType</span> <span class="o">==</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">node</span> <span class="o">=</span> <span class="nx">child</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">;</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">node</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="nx">domEl</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span> <span class="o">=</span> <span class="nx">child</span><span class="o">;</span>
                        <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                                     <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">.</span><span class="nx">CAROUSEL_EL</span><span class="o">);</span>
                        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Found Carousel - &quot;</span> <span class="o">+</span> <span class="nx">node</span> <span class="o">+</span>
                                <span class="o">(</span><span class="nx">child</span><span class="o">.</span><span class="nx">id</span> <span class="o">?</span> <span class="s2">&quot; (#&quot;</span> <span class="o">+</span> <span class="nx">child</span><span class="o">.</span><span class="nx">id</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="o">),</span>
                                <span class="nx">WidgetName</span><span class="o">);</span>
                        <span class="nx">found</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">found</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Find the items within the Carousel and add them to the items table.</span>
<span class="c">         * A Carousel item is identified by elements that matches the carousel</span>
<span class="c">         * item element tag.</span>
<span class="c">         *</span>
<span class="c">         * @method parseCarouselItems</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_parseCarouselItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">child</span><span class="o">,</span>
                <span class="nx">domItemEl</span><span class="o">,</span>
                <span class="nx">elId</span><span class="o">,</span>
                <span class="nx">node</span><span class="o">,</span>
                <span class="nx">parent</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">;</span>

            <span class="nx">domItemEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;carouselItemEl&quot;</span><span class="o">);</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">child</span> <span class="o">=</span> <span class="nx">parent</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">;</span> <span class="nx">child</span><span class="o">;</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">child</span><span class="o">.</span><span class="nx">nextSibling</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">child</span><span class="o">.</span><span class="nx">nodeType</span> <span class="o">==</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">node</span> <span class="o">=</span> <span class="nx">child</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">;</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">node</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="nx">domItemEl</span><span class="o">)</span> <span class="o">{</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">child</span><span class="o">.</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span>
                            <span class="nx">elId</span> <span class="o">=</span> <span class="nx">child</span><span class="o">.</span><span class="nx">id</span><span class="o">;</span>
                        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                            <span class="nx">elId</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">();</span>
                            <span class="nx">child</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;id&quot;</span><span class="o">,</span> <span class="nx">elId</span><span class="o">);</span>
                        <span class="o">}</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">addItem</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Find the Carousel navigation within a container. The navigation</span>
<span class="c">         * elements need to match the carousel navigation class names.</span>
<span class="c">         *</span>
<span class="c">         * @method parseCarouselNavigation</span>
<span class="c">         * @param parent {HTMLElement} The parent element to look under</span>
<span class="c">         * @return {Boolean} True if at least one is found, false otherwise</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_parseCarouselNavigation</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">parent</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cfg</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">i</span><span class="o">,</span>
                <span class="nx">j</span><span class="o">,</span>
                <span class="nx">nav</span><span class="o">,</span>
                <span class="nx">rv</span>       <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="nx">nav</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getElementsByClassName</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">PREV_PAGE</span><span class="o">,</span> <span class="s2">&quot;*&quot;</span><span class="o">,</span> <span class="nx">parent</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">nav</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                        <span class="nx">el</span> <span class="o">=</span> <span class="nx">nav</span><span class="o">[</span><span class="nx">i</span><span class="o">];</span>
                        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Found Carousel previous page navigation - &quot;</span> <span class="o">+</span>
                                <span class="nx">el</span> <span class="o">+</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">id</span> <span class="o">?</span> <span class="s2">&quot; (#&quot;</span> <span class="o">+</span> <span class="nx">el</span><span class="o">.</span><span class="nx">id</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="o">),</span>
                                <span class="nx">WidgetName</span><span class="o">);</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span> <span class="o">==</span> <span class="s2">&quot;INPUT&quot;</span> <span class="o">||</span>
                            <span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span> <span class="o">==</span> <span class="s2">&quot;BUTTON&quot;</span><span class="o">)</span> <span class="o">{</span>
                            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                            <span class="nx">j</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">getElementsByTagName</span><span class="o">(</span><span class="s2">&quot;INPUT&quot;</span><span class="o">);</span>
                            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">j</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="nx">j</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">j</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span>
                            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                                <span class="nx">j</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">getElementsByTagName</span><span class="o">(</span><span class="s2">&quot;BUTTON&quot;</span><span class="o">);</span>
                                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">j</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="nx">j</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">j</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span>
                                <span class="o">}</span>
                            <span class="o">}</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">}</span>
                <span class="nx">cfg</span> <span class="o">=</span> <span class="o">{</span> <span class="nx">prev</span><span class="o">:</span> <span class="nx">nav</span> <span class="o">};</span>
            <span class="o">}</span>

            <span class="nx">nav</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getElementsByClassName</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">NEXT_PAGE</span><span class="o">,</span> <span class="s2">&quot;*&quot;</span><span class="o">,</span> <span class="nx">parent</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">nav</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                        <span class="nx">el</span> <span class="o">=</span> <span class="nx">nav</span><span class="o">[</span><span class="nx">i</span><span class="o">];</span>
                        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Found Carousel next page navigation - &quot;</span> <span class="o">+</span>
                                <span class="nx">el</span> <span class="o">+</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">id</span> <span class="o">?</span> <span class="s2">&quot; (#&quot;</span> <span class="o">+</span> <span class="nx">el</span><span class="o">.</span><span class="nx">id</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="o">),</span>
                                <span class="nx">WidgetName</span><span class="o">);</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span> <span class="o">==</span> <span class="s2">&quot;INPUT&quot;</span> <span class="o">||</span>
                            <span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span> <span class="o">==</span> <span class="s2">&quot;BUTTON&quot;</span><span class="o">)</span> <span class="o">{</span>
                            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                            <span class="nx">j</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">getElementsByTagName</span><span class="o">(</span><span class="s2">&quot;INPUT&quot;</span><span class="o">);</span>
                            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">j</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="nx">j</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">j</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span>
                            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                                <span class="nx">j</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">getElementsByTagName</span><span class="o">(</span><span class="s2">&quot;BUTTON&quot;</span><span class="o">);</span>
                                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">j</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="nx">j</span><span class="o">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">j</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span>
                                <span class="o">}</span>
                            <span class="o">}</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">}</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span> <span class="o">=</span> <span class="nx">nav</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">cfg</span> <span class="o">=</span> <span class="o">{</span> <span class="nx">next</span><span class="o">:</span> <span class="nx">nav</span> <span class="o">};</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;navigation&quot;</span><span class="o">,</span> <span class="nx">cfg</span><span class="o">);</span>
                <span class="nx">rv</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Refresh the widget UI if it is not already rendered, on first item</span>
<span class="c">         * addition.</span>
<span class="c">         *</span>
<span class="c">         * @method _refreshUi</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_refreshUi</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="c">// Set the rendered state appropriately.</span>
<span class="c"></span>            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">fireEvent</span><span class="o">(</span><span class="nx">renderEvent</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the Carousel offset to the passed offset.</span>
<span class="c">         *</span>
<span class="c">         * @method _setCarouselOffset</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setCarouselOffset</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">offset</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">which</span><span class="o">;</span>

            <span class="nx">which</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">)</span> <span class="o">?</span> <span class="s2">&quot;top&quot;</span> <span class="o">:</span> <span class="s2">&quot;left&quot;</span><span class="o">;</span>
            <span class="nx">offset</span> <span class="o">+=</span> <span class="nx">offset</span> <span class="o">!==</span> <span class="m">0</span> <span class="o">?</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="nx">which</span><span class="o">)</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="nx">which</span><span class="o">,</span> <span class="nx">offset</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Setup/Create the Carousel navigation element (if needed).</span>
<span class="c">         *</span>
<span class="c">         * @method _setupCarouselNavigation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setupCarouselNavigation</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">btn</span><span class="o">,</span> <span class="nx">cfg</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">,</span> <span class="nx">nav</span><span class="o">,</span> <span class="nx">navContainer</span><span class="o">,</span> <span class="nx">nextButton</span><span class="o">,</span> <span class="nx">prevButton</span><span class="o">;</span>

            <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">;</span>

            <span class="c">// TODO: can the _navBtns be tested against instead?</span>
<span class="c"></span>            <span class="nx">navContainer</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getElementsByClassName</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">NAVIGATION</span><span class="o">,</span>
                    <span class="s2">&quot;DIV&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">));</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">navContainer</span><span class="o">.</span><span class="nx">length</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">navContainer</span> <span class="o">=</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;DIV&quot;</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">className</span><span class="o">:</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">NAVIGATION</span> <span class="o">});</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">insertBefore</span><span class="o">(</span><span class="nx">navContainer</span><span class="o">,</span>
                        <span class="nx">Dom</span><span class="o">.</span><span class="nx">getFirstChild</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">)));</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">navContainer</span> <span class="o">=</span> <span class="nx">navContainer</span><span class="o">[</span><span class="m">0</span><span class="o">];</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;UL&quot;</span><span class="o">);</span>
            <span class="nx">navContainer</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">el</span><span class="o">);</span>

            <span class="nx">nav</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;navigation&quot;</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">||</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span> <span class="o">=</span> <span class="o">[</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">];</span>
                <span class="o">}</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">btn</span> <span class="k">in</span> <span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">btn</span><span class="o">))</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">prev</span><span class="o">[</span><span class="nx">btn</span><span class="o">]));</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="c">// TODO: separate method for creating a navigation button</span>
<span class="c"></span>                <span class="nx">prevButton</span> <span class="o">=</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;SPAN&quot;</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">className</span><span class="o">:</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">BUTTON</span> <span class="o">+</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FIRST_NAV</span> <span class="o">});</span>
                <span class="c">// XXX: for IE 6.x</span>
<span class="c"></span>                <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">prevButton</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                <span class="nx">btn</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">();</span>
                <span class="nx">prevButton</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">&quot;&lt;button type=\&quot;button\&quot; &quot;</span>      <span class="o">+</span>
                        <span class="s2">&quot;id=\&quot;&quot;</span> <span class="o">+</span> <span class="nx">btn</span> <span class="o">+</span> <span class="s2">&quot;\&quot; name=\&quot;&quot;</span>                   <span class="o">+</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">PREVIOUS_BUTTON_TEXT</span> <span class="o">+</span> <span class="s2">&quot;\&quot;&gt;&quot;</span>  <span class="o">+</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">PREVIOUS_BUTTON_TEXT</span> <span class="o">+</span> <span class="s2">&quot;&lt;/button&gt;&quot;</span><span class="o">;</span>
                <span class="nx">navContainer</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">prevButton</span><span class="o">);</span>
                <span class="nx">btn</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">btn</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">prev</span> <span class="o">=</span> <span class="o">[</span><span class="nx">btn</span><span class="o">];</span>
                <span class="nx">cfg</span> <span class="o">=</span> <span class="o">{</span> <span class="nx">prev</span><span class="o">:</span> <span class="o">[</span><span class="nx">prevButton</span><span class="o">]</span> <span class="o">};</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">||</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">nav</span><span class="o">.</span><span class="nx">next</span> <span class="o">=</span> <span class="o">[</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">];</span>
                <span class="o">}</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">btn</span> <span class="k">in</span> <span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">btn</span><span class="o">))</span> <span class="o">{</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">nav</span><span class="o">.</span><span class="nx">next</span><span class="o">[</span><span class="nx">btn</span><span class="o">]));</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="c">// TODO: separate method for creating a navigation button</span>
<span class="c"></span>                <span class="nx">nextButton</span> <span class="o">=</span> <span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;SPAN&quot;</span><span class="o">,</span>
                        <span class="o">{</span> <span class="nx">className</span><span class="o">:</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">BUTTON</span> <span class="o">+</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">NEXT_NAV</span> <span class="o">});</span>
                <span class="c">// XXX: for IE 6.x</span>
<span class="c"></span>                <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">nextButton</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                <span class="nx">btn</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">();</span>
                <span class="nx">nextButton</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">&quot;&lt;button type=\&quot;button\&quot; &quot;</span>      <span class="o">+</span>
                        <span class="s2">&quot;id=\&quot;&quot;</span> <span class="o">+</span> <span class="nx">btn</span> <span class="o">+</span> <span class="s2">&quot;\&quot; name=\&quot;&quot;</span>                   <span class="o">+</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">NEXT_BUTTON_TEXT</span> <span class="o">+</span> <span class="s2">&quot;\&quot;&gt;&quot;</span>      <span class="o">+</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">NEXT_BUTTON_TEXT</span> <span class="o">+</span> <span class="s2">&quot;&lt;/button&gt;&quot;</span><span class="o">;</span>
                <span class="nx">navContainer</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">nextButton</span><span class="o">);</span>
                <span class="nx">btn</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">btn</span><span class="o">);</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_navBtns</span><span class="o">.</span><span class="nx">next</span> <span class="o">=</span> <span class="o">[</span><span class="nx">btn</span><span class="o">];</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span> <span class="o">=</span> <span class="o">[</span><span class="nx">nextButton</span><span class="o">];</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">cfg</span> <span class="o">=</span> <span class="o">{</span> <span class="nx">next</span><span class="o">:</span> <span class="o">[</span><span class="nx">nextButton</span><span class="o">]</span> <span class="o">};</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;navigation&quot;</span><span class="o">,</span> <span class="nx">cfg</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">navContainer</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the clip container size (based on the new numVisible value).</span>
<span class="c">         *</span>
<span class="c">         * @method _setClipContainerSize</span>
<span class="c">         * @param clip {HTMLElement} The clip container element.</span>
<span class="c">         * @param num {Number} optional The number of items per page.</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setClipContainerSize</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="nx">num</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">attr</span><span class="o">,</span> <span class="nx">currVal</span><span class="o">,</span> <span class="nx">isVertical</span><span class="o">,</span> <span class="nx">itemSize</span><span class="o">,</span> <span class="nx">reveal</span><span class="o">,</span> <span class="nx">size</span><span class="o">,</span> <span class="nx">which</span><span class="o">;</span>

            <span class="nx">isVertical</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">);</span>
            <span class="nx">reveal</span>     <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;revealAmount&quot;</span><span class="o">);</span>
            <span class="nx">which</span>      <span class="o">=</span> <span class="nx">isVertical</span> <span class="o">?</span> <span class="s2">&quot;height&quot;</span> <span class="o">:</span> <span class="s2">&quot;width&quot;</span><span class="o">;</span>
            <span class="nx">attr</span>       <span class="o">=</span> <span class="nx">isVertical</span> <span class="o">?</span> <span class="s2">&quot;top&quot;</span> <span class="o">:</span> <span class="s2">&quot;left&quot;</span><span class="o">;</span>

            <span class="nx">clip</span>       <span class="o">=</span> <span class="nx">clip</span> <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">;</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">clip</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="nx">num</span>        <span class="o">=</span> <span class="nx">num</span>  <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">);</span>
            <span class="nx">itemSize</span>   <span class="o">=</span> <span class="nx">getCarouselItemSize</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="nx">which</span><span class="o">);</span>
            <span class="nx">size</span>       <span class="o">=</span> <span class="nx">itemSize</span> <span class="o">*</span> <span class="nx">num</span><span class="o">;</span>

            <span class="c">// TODO: try to re-use the _hasRendered indicator</span>
<span class="c"></span>            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_recomputeSize</span> <span class="o">=</span> <span class="o">(</span><span class="nx">size</span> <span class="o">===</span> <span class="m">0</span><span class="o">);</span> <span class="c">// bleh!</span>
<span class="c"></span>            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_recomputeSize</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
                <span class="k">return</span><span class="o">;</span>             <span class="c">// no use going further, bail out!</span>
<span class="c"></span>            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">reveal</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">reveal</span> <span class="o">=</span> <span class="nx">itemSize</span> <span class="o">*</span> <span class="o">(</span><span class="nx">reveal</span> <span class="o">/</span> <span class="m">100</span><span class="o">)</span> <span class="o">*</span> <span class="m">2</span><span class="o">;</span>
                <span class="nx">size</span> <span class="o">+=</span> <span class="nx">reveal</span><span class="o">;</span>
                <span class="c">// TODO: set the Carousel&#39;s initial offset somwehere</span>
<span class="c"></span>                <span class="nx">currVal</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="nx">attr</span><span class="o">));</span>
                <span class="nx">currVal</span> <span class="o">=</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">currVal</span><span class="o">)</span> <span class="o">?</span> <span class="nx">currVal</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                             <span class="nx">attr</span><span class="o">,</span> <span class="nx">currVal</span> <span class="o">+</span> <span class="o">(</span><span class="nx">reveal</span> <span class="o">/</span> <span class="m">2</span><span class="o">)</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">isVertical</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">size</span> <span class="o">+=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginTop&quot;</span><span class="o">)</span>        <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginBottom&quot;</span><span class="o">)</span>     <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingTop&quot;</span><span class="o">)</span>       <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingBottom&quot;</span><span class="o">)</span>    <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderTopWidth&quot;</span><span class="o">)</span>   <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderBottomWidth&quot;</span><span class="o">);</span>
                <span class="c">// XXX: for vertical Carousel</span>
<span class="c"></span>                <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="nx">which</span><span class="o">,</span> <span class="o">(</span><span class="nx">size</span> <span class="o">-</span> <span class="o">(</span><span class="nx">num</span> <span class="o">-</span> <span class="m">1</span><span class="o">))</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">size</span> <span class="o">+=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">)</span>      <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginRight&quot;</span><span class="o">)</span>     <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingLeft&quot;</span><span class="o">)</span>     <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingRight&quot;</span><span class="o">)</span>    <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderLeftWidth&quot;</span><span class="o">)</span> <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderRightWidth&quot;</span><span class="o">);</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="nx">which</span><span class="o">,</span> <span class="nx">size</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setContainerSize</span><span class="o">(</span><span class="nx">clip</span><span class="o">);</span> <span class="c">// adjust the container size too</span>
<span class="c"></span>        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the container size.</span>
<span class="c">         *</span>
<span class="c">         * @method _setContainerSize</span>
<span class="c">         * @param clip {HTMLElement} The clip container element.</span>
<span class="c">         * @param attr {String} Either set the height or width.</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setContainerSize</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="nx">attr</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">config</span>   <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CONFIG</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">isVertical</span><span class="o">,</span>
                <span class="nx">size</span><span class="o">;</span>

            <span class="nx">isVertical</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;isVertical&quot;</span><span class="o">);</span>
            <span class="nx">clip</span>       <span class="o">=</span> <span class="nx">clip</span> <span class="o">||</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">;</span>
            <span class="nx">attr</span>       <span class="o">=</span> <span class="nx">attr</span> <span class="o">||</span> <span class="o">(</span><span class="nx">isVertical</span> <span class="o">?</span> <span class="s2">&quot;height&quot;</span> <span class="o">:</span> <span class="s2">&quot;width&quot;</span><span class="o">);</span>
            <span class="nx">size</span>       <span class="o">=</span> <span class="nb">parseFloat</span><span class="o">(</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="nx">attr</span><span class="o">),</span> <span class="m">10</span><span class="o">);</span>

            <span class="nx">size</span> <span class="o">=</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">size</span><span class="o">)</span> <span class="o">?</span> <span class="nx">size</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">isVertical</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">size</span> <span class="o">+=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginTop&quot;</span><span class="o">)</span>         <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;marginBottom&quot;</span><span class="o">)</span>      <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingTop&quot;</span><span class="o">)</span>        <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;paddingBottom&quot;</span><span class="o">)</span>     <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderTopWidth&quot;</span><span class="o">)</span>    <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="s2">&quot;borderBottomWidth&quot;</span><span class="o">)</span> <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_navEl</span><span class="o">,</span> <span class="s2">&quot;height&quot;</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">size</span> <span class="o">+=</span> <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;marginLeft&quot;</span><span class="o">)</span>                    <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;marginRight&quot;</span><span class="o">)</span>                   <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;paddingLeft&quot;</span><span class="o">)</span>                   <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;paddingRight&quot;</span><span class="o">)</span>                  <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;borderLeftWidth&quot;</span><span class="o">)</span>               <span class="o">+</span>
                        <span class="nx">getStyle</span><span class="o">(</span><span class="nx">clip</span><span class="o">,</span> <span class="s2">&quot;borderRightWidth&quot;</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">isVertical</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">size</span> <span class="o">&lt;</span> <span class="nx">config</span><span class="o">.</span><span class="nx">HORZ_MIN_WIDTH</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">size</span> <span class="o">=</span> <span class="nx">config</span><span class="o">.</span><span class="nx">HORZ_MIN_WIDTH</span><span class="o">;</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">MIN_WIDTH</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">attr</span><span class="o">,</span>  <span class="nx">size</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>

            <span class="c">// Additionally the width of the container should be set for</span>
<span class="c"></span>            <span class="c">// the vertical Carousel</span>
<span class="c"></span>            <span class="k">if</span> <span class="o">(</span><span class="nx">isVertical</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">size</span> <span class="o">=</span> <span class="nx">getCarouselItemSize</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">carousel</span><span class="o">,</span> <span class="s2">&quot;width&quot;</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">size</span> <span class="o">&lt;</span> <span class="nx">config</span><span class="o">.</span><span class="nx">VERT_MIN_WIDTH</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">size</span> <span class="o">=</span> <span class="nx">config</span><span class="o">.</span><span class="nx">VERT_MIN_WIDTH</span><span class="o">;</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">MIN_WIDTH</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="s2">&quot;width&quot;</span><span class="o">,</span>  <span class="nx">size</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the value for the Carousel&#39;s first visible item.</span>
<span class="c">         *</span>
<span class="c">         * @method _setFirstVisible</span>
<span class="c">         * @param val {Number} The new value for firstVisible</span>
<span class="c">         * @return {Number} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setFirstVisible</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;=</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">scrollTo</span><span class="o">(</span><span class="nx">val</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">return</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the value for the Carousel&#39;s navigation.</span>
<span class="c">         *</span>
<span class="c">         * @method _setNavigation</span>
<span class="c">         * @param cfg {Object} The navigation configuration</span>
<span class="c">         * @return {Object} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setNavigation</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="nx">scrollPageBackward</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">,</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="nx">scrollPageForward</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the value for the number of visible items in the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method _setNumVisible</span>
<span class="c">         * @param val {Number} The new value for numVisible</span>
<span class="c">         * @return {Number} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setNumVisible</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setClipContainerSize</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_clipEl</span><span class="o">,</span> <span class="nx">val</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the number of items in the Carousel.</span>
<span class="c">         * Warning: Setting this to a lower number than the current removes</span>
<span class="c">         * items from the end.</span>
<span class="c">         *</span>
<span class="c">         * @method _setNumItems</span>
<span class="c">         * @param val {Number} The new value for numItems</span>
<span class="c">         * @return {Number} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setNumItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">num</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">length</span> <span class="o">!=</span> <span class="nx">num</span><span class="o">)</span> <span class="o">{</span> <span class="c">// out of sync</span>
<span class="c"></span>                    <span class="nx">num</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">=</span> <span class="nx">num</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&lt;</span> <span class="nx">num</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">while</span> <span class="o">(</span><span class="nx">num</span> <span class="o">&gt;</span> <span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">removeItem</span><span class="o">(</span><span class="nx">num</span> <span class="o">-</span> <span class="m">1</span><span class="o">);</span>
                    <span class="nx">num</span><span class="o">--;</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the orientation of the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method _setOrientation</span>
<span class="c">         * @param val {Boolean} The new value for isVertical</span>
<span class="c">         * @return {Boolean} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setOrientation</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">replaceClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">HORIZONTAL</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">VERTICAL</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">replaceClass</span><span class="o">(</span><span class="nx">cssClass</span><span class="o">.</span><span class="nx">VERTICAL</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">HORIZONTAL</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">size</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="c">// force recalculation next time</span>
<span class="c"></span>            <span class="k">return</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the value for the reveal amount percentage in the Carousel.</span>
<span class="c">         *</span>
<span class="c">         * @method _setRevealAmount</span>
<span class="c">         * @param val {Number} The new value for revealAmount</span>
<span class="c">         * @return {Number} The new value that would be set</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setRevealAmount</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;=</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;=</span> <span class="m">100</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">val</span><span class="o">,</span> <span class="m">10</span><span class="o">);</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">?</span> <span class="nx">val</span> <span class="o">:</span> <span class="m">0</span><span class="o">;</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_setClipContainerSize</span><span class="o">();</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;revealAmount&quot;</span><span class="o">);</span>
            <span class="o">}</span>
            <span class="k">return</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the value for the selected item.</span>
<span class="c">         *</span>
<span class="c">         * @method _setSelectedItem</span>
<span class="c">         * @param val {Number} The new value for &quot;selected&quot; item</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_setSelectedItem</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">_selectedItem</span> <span class="o">=</span> <span class="nx">val</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Synchronize and redraw the UI after an item is added.</span>
<span class="c">         *</span>
<span class="c">         * @method _syncUiForItemAdd</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_syncUiForItemAdd</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">carouselEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">item</span><span class="o">,</span>
                <span class="nx">itemsTable</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">,</span>
                <span class="nx">oel</span><span class="o">,</span>
                <span class="nx">pos</span><span class="o">,</span>
                <span class="nx">sibling</span><span class="o">;</span>

            <span class="nx">pos</span>  <span class="o">=</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span><span class="o">)</span> <span class="o">?</span> <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">numItems</span> <span class="o">-</span> <span class="m">1</span> <span class="o">:</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span><span class="o">;</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">pos</span><span class="o">]))</span> <span class="o">{</span>
                <span class="nx">item</span> <span class="o">=</span> <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">pos</span><span class="o">];</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">item</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">item</span><span class="o">.</span><span class="nx">id</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">oel</span>  <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">item</span><span class="o">.</span><span class="nx">id</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">oel</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_createCarouselItem</span><span class="o">({</span>
                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">item</span><span class="o">.</span><span class="nx">className</span><span class="o">,</span>
                        <span class="nx">content</span>   <span class="o">:</span> <span class="nx">item</span><span class="o">.</span><span class="nx">item</span><span class="o">,</span>
                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">item</span><span class="o">.</span><span class="nx">id</span>
                <span class="o">});</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">loading</span><span class="o">[</span><span class="nx">pos</span><span class="o">]))</span> <span class="o">{</span>
                        <span class="nx">oel</span> <span class="o">=</span> <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">loading</span><span class="o">[</span><span class="nx">pos</span><span class="o">];</span>
                        <span class="c">// if oel is null, it is a problem ...</span>
<span class="c"></span>                    <span class="o">}</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">oel</span><span class="o">)</span> <span class="o">{</span>
                        <span class="c">// replace the node</span>
<span class="c"></span>                        <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">replaceChild</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">oel</span><span class="o">);</span>
                        <span class="c">// ... and remove the item from the data structure</span>
<span class="c"></span>                        <span class="nx">delete</span> <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">loading</span><span class="o">[</span><span class="nx">pos</span><span class="o">];</span>
                    <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                        <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span> <span class="o">+</span> <span class="m">1</span><span class="o">]))</span> <span class="o">{</span>
                        <span class="nx">sibling</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span> <span class="o">+</span> <span class="m">1</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>
                    <span class="o">}</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">sibling</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">insertBefore</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">sibling</span><span class="o">);</span>
                    <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to find sibling&quot;</span><span class="o">,</span><span class="s2">&quot;error&quot;</span><span class="o">,</span><span class="nx">WidgetName</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(!</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">isAncestor</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span> <span class="nx">oel</span><span class="o">))</span> <span class="o">{</span>
                        <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">oel</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(!</span><span class="nx">Dom</span><span class="o">.</span><span class="nx">isAncestor</span><span class="o">(</span><span class="nx">carouselEl</span><span class="o">,</span> <span class="nx">oel</span><span class="o">))</span> <span class="o">{</span>
                        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span> <span class="o">+</span> <span class="m">1</span><span class="o">]))</span> <span class="o">{</span>
                            <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">insertBefore</span><span class="o">(</span><span class="nx">oel</span><span class="o">,</span>
                                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span> <span class="o">+</span> <span class="m">1</span><span class="o">].</span><span class="nx">id</span><span class="o">));</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_hasRendered</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_refreshUi</span><span class="o">();</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">&lt;</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;firstVisible&quot;</span><span class="o">));</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Synchronize and redraw the UI after an item is removed.</span>
<span class="c">         *</span>
<span class="c">         * @method _syncUiForItemAdd</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_syncUiForItemRemove</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">carouselEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                <span class="nx">el</span><span class="o">,</span> <span class="nx">item</span><span class="o">,</span> <span class="nx">num</span><span class="o">,</span> <span class="nx">pos</span><span class="o">;</span>

            <span class="nx">num</span>  <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>
            <span class="nx">item</span> <span class="o">=</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">item</span><span class="o">;</span>
            <span class="nx">pos</span>  <span class="o">=</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">pos</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">item</span> <span class="o">&amp;&amp;</span> <span class="o">(</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">item</span><span class="o">.</span><span class="nx">id</span><span class="o">)))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">el</span> <span class="o">&amp;&amp;</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">isAncestor</span><span class="o">(</span><span class="nx">carouselEl</span><span class="o">,</span> <span class="nx">el</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">Event</span><span class="o">.</span><span class="nx">purgeElement</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
                    <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">removeChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                <span class="o">}</span>

                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">)</span> <span class="o">==</span> <span class="nx">pos</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">pos</span> <span class="o">=</span> <span class="nx">pos</span> <span class="o">&gt;=</span> <span class="nx">num</span> <span class="o">?</span> <span class="nx">num</span> <span class="o">-</span> <span class="m">1</span> <span class="o">:</span> <span class="nx">pos</span><span class="o">;</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s2">&quot;selectedItem&quot;</span><span class="o">,</span> <span class="nx">pos</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to find item&quot;</span><span class="o">,</span> <span class="s2">&quot;warn&quot;</span><span class="o">,</span> <span class="nx">WidgetName</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Synchronize and redraw the UI for lazy loading.</span>
<span class="c">         *</span>
<span class="c">         * @method _syncUiForLazyLoading</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_syncUiForLazyLoading</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span>   <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">carouselEl</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_carouselEl</span><span class="o">,</span>
                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">i</span><span class="o">,</span>
                <span class="nx">itemsTable</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">,</span>
                <span class="nx">sibling</span><span class="o">;</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">first</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">last</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_createCarouselItem</span><span class="o">({</span>
                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">.</span><span class="nx">ITEM_LOADING</span><span class="o">,</span>
                        <span class="nx">content</span>   <span class="o">:</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">ITEM_LOADING_CONTENT</span><span class="o">,</span>
                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">()</span>
                <span class="o">});</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">last</span> <span class="o">+</span> <span class="m">1</span><span class="o">]))</span> <span class="o">{</span>
                        <span class="nx">sibling</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">obj</span><span class="o">.</span><span class="nx">last</span> <span class="o">+</span> <span class="m">1</span><span class="o">].</span><span class="nx">id</span><span class="o">);</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">sibling</span><span class="o">)</span> <span class="o">{</span>
                            <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">insertBefore</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">sibling</span><span class="o">);</span>
                        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                            <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to find sibling&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span>
                                    <span class="nx">WidgetName</span><span class="o">);</span>
                        <span class="o">}</span>
                    <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                        <span class="nx">carouselEl</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
                <span class="nx">itemsTable</span><span class="o">.</span><span class="nx">loading</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the correct class for the navigation buttons.</span>
<span class="c">         *</span>
<span class="c">         * @method _updateNavButtons</span>
<span class="c">         * @param el {Object} The target button</span>
<span class="c">         * @param setFocus {Boolean} True to set focus ring, false otherwise.</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_updateNavButtons</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">setFocus</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">children</span><span class="o">,</span>
                <span class="nx">cssClass</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">grandParent</span><span class="o">,</span>
                <span class="nx">parent</span>   <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">parentNode</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">parent</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>
            <span class="nx">grandParent</span> <span class="o">=</span> <span class="nx">parent</span><span class="o">.</span><span class="nx">parentNode</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">.</span><span class="nx">toUpperCase</span><span class="o">()</span> <span class="o">==</span> <span class="s2">&quot;BUTTON&quot;</span> <span class="o">&amp;&amp;</span>
                <span class="nx">Dom</span><span class="o">.</span><span class="nx">hasClass</span><span class="o">(</span><span class="nx">parent</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">BUTTON</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">setFocus</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">grandParent</span><span class="o">)</span> <span class="o">{</span>
                        <span class="nx">children</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getChildren</span><span class="o">(</span><span class="nx">grandParent</span><span class="o">);</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">children</span><span class="o">)</span> <span class="o">{</span>
                            <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">children</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FOCUSSED_BUTTON</span><span class="o">);</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">parent</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FOCUSSED_BUTTON</span><span class="o">);</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="nx">parent</span><span class="o">,</span> <span class="nx">cssClass</span><span class="o">.</span><span class="nx">FOCUSSED_BUTTON</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Update the UI for the pager buttons based on the current page and</span>
<span class="c">         * the number of pages.</span>
<span class="c">         *</span>
<span class="c">         * @method _updatePagerButtons</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_updatePagerButtons</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">css</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">CLASSES</span><span class="o">,</span>
                <span class="nx">cur</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">cur</span><span class="o">,</span> <span class="c">// current page</span>
<span class="c"></span>                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">html</span><span class="o">,</span>
                <span class="nx">i</span><span class="o">,</span>
                <span class="nx">item</span><span class="o">,</span>
                <span class="nx">n</span>        <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">),</span>
                <span class="nx">num</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">num</span><span class="o">,</span> <span class="c">// total pages</span>
<span class="c"></span>                <span class="nx">pager</span>    <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">el</span><span class="o">;</span>  <span class="c">// the pager container element</span>
<span class="c"></span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">num</span> <span class="o">===</span> <span class="m">0</span> <span class="o">||</span> <span class="o">!</span><span class="nx">pager</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>         <span class="c">// don&#39;t do anything if number of pages is 0</span>
<span class="c"></span>            <span class="o">}</span>

            <span class="c">// Hide the pager before redrawing it</span>
<span class="c"></span>            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;hidden&quot;</span><span class="o">);</span>

            <span class="c">// Remove all nodes from the pager</span>
<span class="c"></span>            <span class="k">while</span> <span class="o">(</span><span class="nx">pager</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">pager</span><span class="o">.</span><span class="nx">removeChild</span><span class="o">(</span><span class="nx">pager</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">num</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span> <span class="o">*</span> <span class="nx">n</span><span class="o">]))</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span> <span class="o">*</span> <span class="nx">n</span><span class="o">].</span><span class="nx">id</span><span class="o">;</span>

                <span class="nx">el</span>   <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;LI&quot;</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to create an LI pager button&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span>
                              <span class="nx">WidgetName</span><span class="o">);</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>

                <span class="k">if</span> <span class="o">(</span><span class="nx">i</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">css</span><span class="o">.</span><span class="nx">FIRST_PAGE</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">cur</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">css</span><span class="o">.</span><span class="nx">SELECTED_NAV</span><span class="o">);</span>
                <span class="o">}</span>

                <span class="c">// TODO: use a template string for i18N compliance</span>
<span class="c"></span>                <span class="nx">html</span> <span class="o">=</span> <span class="s2">&quot;&lt;a href=\&quot;#&quot;</span> <span class="o">+</span> <span class="nx">item</span> <span class="o">+</span> <span class="s2">&quot;\&quot; tabindex=\&quot;0\&quot;&gt;&lt;em&gt;&quot;</span>   <span class="o">+</span>
                        <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">PAGER_PREFIX_TEXT</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="o">(</span><span class="nx">i</span><span class="o">+</span><span class="m">1</span><span class="o">)</span> <span class="o">+</span>
                        <span class="s2">&quot;&lt;/em&gt;&lt;/a&gt;&quot;</span><span class="o">;</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">html</span><span class="o">;</span>

                <span class="nx">pager</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="c">// Show the pager now</span>
<span class="c"></span>            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Update the UI for the pager menu based on the current page and</span>
<span class="c">         * the number of pages.  If the number of pages is greater than</span>
<span class="c">         * MAX_PAGER_BUTTONS, then the selection of pages is provided by a drop</span>
<span class="c">         * down menu instead of a set of buttons.</span>
<span class="c">         *</span>
<span class="c">         * @method _updatePagerMenu</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_updatePagerMenu</span><span class="o">:</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span>
                <span class="nx">cur</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">cur</span><span class="o">,</span> <span class="c">// current page</span>
<span class="c"></span>                <span class="nx">el</span><span class="o">,</span>
                <span class="nx">i</span><span class="o">,</span>
                <span class="nx">item</span><span class="o">,</span>
                <span class="nx">n</span>        <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numVisible&quot;</span><span class="o">),</span>
                <span class="nx">num</span>      <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">num</span><span class="o">,</span> <span class="c">// total pages</span>
<span class="c"></span>                <span class="nx">pager</span>    <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_pages</span><span class="o">.</span><span class="nx">el</span><span class="o">,</span>  <span class="c">// the pager container element</span>
<span class="c"></span>                <span class="nx">sel</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">num</span> <span class="o">===</span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">return</span><span class="o">;</span>         <span class="c">// don&#39;t do anything if number of pages is 0</span>
<span class="c"></span>            <span class="o">}</span>

            <span class="nx">sel</span> <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;SELECT&quot;</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">sel</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to create the pager menu&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span>
                          <span class="nx">WidgetName</span><span class="o">);</span>
                <span class="k">return</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="c">// Hide the pager before redrawing it</span>
<span class="c"></span>            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;hidden&quot;</span><span class="o">);</span>

            <span class="c">// Remove all nodes from the pager</span>
<span class="c"></span>            <span class="k">while</span> <span class="o">(</span><span class="nx">pager</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">pager</span><span class="o">.</span><span class="nx">removeChild</span><span class="o">(</span><span class="nx">pager</span><span class="o">.</span><span class="nx">firstChild</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">num</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span> <span class="o">*</span> <span class="nx">n</span><span class="o">]))</span> <span class="o">{</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">item</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">_itemsTable</span><span class="o">.</span><span class="nx">items</span><span class="o">[</span><span class="nx">i</span> <span class="o">*</span> <span class="nx">n</span><span class="o">].</span><span class="nx">id</span><span class="o">;</span>

                <span class="nx">el</span>   <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;OPTION&quot;</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to create an OPTION pager menu&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span>
                              <span class="nx">WidgetName</span><span class="o">);</span>
                    <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">value</span>     <span class="o">=</span> <span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">item</span><span class="o">;</span>
                <span class="c">// TODO: use a template string for i18N compliance</span>
<span class="c"></span>                <span class="nx">el</span><span class="o">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">STRINGS</span><span class="o">.</span><span class="nx">PAGER_PREFIX_TEXT</span><span class="o">+</span><span class="s2">&quot; &quot;</span><span class="o">+(</span><span class="nx">i</span><span class="o">+</span><span class="m">1</span><span class="o">);</span>

                <span class="k">if</span> <span class="o">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">cur</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">el</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s2">&quot;selected&quot;</span><span class="o">,</span> <span class="s2">&quot;selected&quot;</span><span class="o">);</span>
                <span class="o">}</span>

                <span class="nx">sel</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="s2">&quot;FORM&quot;</span><span class="o">);</span>
            <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Unable to create the pager menu&quot;</span><span class="o">,</span> <span class="s2">&quot;error&quot;</span><span class="o">,</span>
                          <span class="nx">WidgetName</span><span class="o">);</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">sel</span><span class="o">);</span>
                <span class="nx">pager</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="c">// Show the pager now</span>
<span class="c"></span>            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">pager</span><span class="o">,</span> <span class="s2">&quot;visibility&quot;</span><span class="o">,</span> <span class="s2">&quot;visible&quot;</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Set the correct tab index for the Carousel items.</span>
<span class="c">         *</span>
<span class="c">         * @method _updateTabIndex</span>
<span class="c">         * @param el {Object} The element to be focussed</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_updateTabIndex</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">carousel</span><span class="o">.</span><span class="nx">_focusableItemEl</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">carousel</span><span class="o">.</span><span class="nx">_focusableItemEl</span><span class="o">.</span><span class="nx">tabIndex</span> <span class="o">=</span> <span class="o">-</span><span class="m">1</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="nx">carousel</span><span class="o">.</span><span class="nx">_focusableItemEl</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">tabIndex</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate animation parameters.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateAnimation</span>
<span class="c">         * @param cfg {Object} The animation configuration</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateAnimation</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">rv</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isObject</span><span class="o">(</span><span class="nx">cfg</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">speed</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">rv</span> <span class="o">=</span> <span class="nx">rv</span> <span class="o">&amp;&amp;</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">speed</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">effect</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">rv</span> <span class="o">=</span> <span class="nx">rv</span> <span class="o">&amp;&amp;</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isFunction</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">effect</span><span class="o">);</span>
                <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Easing</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">cfg</span><span class="o">.</span><span class="nx">effect</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Easing</span><span class="o">.</span><span class="nx">easeOut</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                <span class="nx">rv</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate the firstVisible value.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateFirstVisible</span>
<span class="c">         * @param val {Number} The first visible value</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateFirstVisible</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">this</span><span class="o">,</span> <span class="nx">numItems</span> <span class="o">=</span> <span class="nx">carousel</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">numItems</span> <span class="o">===</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">==</span> <span class="nx">numItems</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
                <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;=</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;</span> <span class="nx">numItems</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate and navigation parameters.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateNavigation</span>
<span class="c">         * @param cfg {Object} The navigation configuration</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateNavigation</span> <span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">i</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isObject</span><span class="o">(</span><span class="nx">cfg</span><span class="o">))</span> <span class="o">{</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">prev</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">nodeName</span><span class="o">))</span> <span class="o">{</span>
                            <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isArray</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">))</span> <span class="o">{</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                <span class="o">}</span>
                <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">if</span> <span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                        <span class="k">if</span> <span class="o">(!</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">cfg</span><span class="o">.</span><span class="nx">next</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">nodeName</span><span class="o">))</span> <span class="o">{</span>
                            <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate the numItems value.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateNumItems</span>
<span class="c">         * @param val {Number} The numItems value</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateNumItems</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">return</span> <span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;=</span> <span class="m">0</span><span class="o">);</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate the numVisible value.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateNumVisible</span>
<span class="c">         * @param val {Number} The numVisible value</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateNumVisible</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">rv</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">rv</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">&gt;</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">);</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate the revealAmount value.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateRevealAmount</span>
<span class="c">         * @param val {Number} The revealAmount value</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateRevealAmount</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">rv</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">rv</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">&gt;=</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;</span> <span class="m">100</span><span class="o">;</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">},</span>

        <span class="c">/**</span>
<span class="c">         * Validate the scrollIncrement value.</span>
<span class="c">         *</span>
<span class="c">         * @method _validateScrollIncrement</span>
<span class="c">         * @param val {Number} The scrollIncrement value</span>
<span class="c">         * @return {Boolean} The status of the validation</span>
<span class="c">         * @protected</span>
<span class="c">         */</span>
        <span class="nx">_validateScrollIncrement</span><span class="o">:</span> <span class="k">function</span> <span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">rv</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>

            <span class="k">if</span> <span class="o">(</span><span class="nx">JS</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">(</span><span class="nx">val</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">rv</span> <span class="o">=</span> <span class="o">(</span><span class="nx">val</span> <span class="o">&gt;</span> <span class="m">0</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">&lt;</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;numItems&quot;</span><span class="o">));</span>
            <span class="o">}</span>

            <span class="k">return</span> <span class="nx">rv</span><span class="o">;</span>
        <span class="o">}</span>

    <span class="o">});</span>

<span class="o">})();</span>
<span class="c">/*</span>
<span class="c">;;  Local variables: **</span>
<span class="c">;;  mode: js2 **</span>
<span class="c">;;  indent-tabs-mode: nil **</span>
<span class="c">;;  End: **</span>
<span class="c">*/</span>
</pre></div>
                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div id="moduleList" class="module">
                        <h4>Modules</h4>
                        <ul class="content">
                                <li class=""><a href="module_animation.html" title="animation">animation</a></li>
                                <li class=""><a href="module_autocomplete.html" title="autocomplete">autocomplete</a></li>
                                <li class=""><a href="module_button.html" title="button">button</a></li>
                                <li class=""><a href="module_calendar.html" title="calendar">calendar</a></li>
                                <li class="selected"><a href="module_carousel.html" title="carousel">carousel</a></li>
                                <li class=""><a href="module_charts.html" title="charts">charts</a></li>
                                <li class=""><a href="module_colorpicker.html" title="colorpicker">colorpicker</a></li>
                                <li class=""><a href="module_connection.html" title="connection">connection</a></li>
                                <li class=""><a href="module_container.html" title="container">container</a></li>
                                <li class=""><a href="module_cookie.html" title="cookie">cookie</a></li>
                                <li class=""><a href="module_datasource.html" title="datasource">datasource</a></li>
                                <li class=""><a href="module_datatable.html" title="datatable">datatable</a></li>
                                <li class=""><a href="module_dom.html" title="dom">dom</a></li>
                                <li class=""><a href="module_dragdrop.html" title="dragdrop">dragdrop</a></li>
                                <li class=""><a href="module_editor.html" title="editor">editor</a></li>
                                <li class=""><a href="module_element.html" title="element">element</a></li>
                                <li class=""><a href="module_event.html" title="event">event</a></li>
                                <li class=""><a href="module_get.html" title="get">get</a></li>
                                <li class=""><a href="module_history.html" title="history">history</a></li>
                                <li class=""><a href="module_imagecropper.html" title="imagecropper">imagecropper</a></li>
                                <li class=""><a href="module_imageloader.html" title="imageloader">imageloader</a></li>
                                <li class=""><a href="module_json.html" title="json">json</a></li>
                                <li class=""><a href="module_layout.html" title="layout">layout</a></li>
                                <li class=""><a href="module_logger.html" title="logger">logger</a></li>
                                <li class=""><a href="module_menu.html" title="menu">menu</a></li>
                                <li class=""><a href="module_paginator.html" title="paginator">paginator</a></li>
                                <li class=""><a href="module_profiler.html" title="profiler">profiler</a></li>
                                <li class=""><a href="module_profilerviewer.html" title="profilerviewer">profilerviewer</a></li>
                                <li class=""><a href="module_resize.html" title="resize">resize</a></li>
                                <li class=""><a href="module_selector.html" title="selector">selector</a></li>
                                <li class=""><a href="module_slider.html" title="slider">slider</a></li>
                                <li class=""><a href="module_stylesheet.html" title="stylesheet">stylesheet</a></li>
                                <li class=""><a href="module_tabview.html" title="tabview">tabview</a></li>
                                <li class=""><a href="module_treeview.html" title="treeview">treeview</a></li>
                                <li class=""><a href="module_uploader.html" title="uploader">uploader</a></li>
                                <li class=""><a href="module_yahoo.html" title="yahoo">yahoo</a></li>
                                <li class=""><a href="module_yuiloader.html" title="yuiloader">yuiloader</a></li>
                                <li class=""><a href="module_yuitest.html" title="yuitest">yuitest</a></li>
                        </ul>
                    </div>

                    <div id="classList" class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="YAHOO.widget.Carousel.html" title="YAHOO.widget.Carousel">YAHOO.widget.Carousel</a></li>
                        </ul>
                    </div>

                    <div id="fileList" class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class="selected"><a href="Carousel.js.html" title="Carousel.js">Carousel.js</a></li>
                                <li class=""><a href="markupTests.js.html" title="markupTests.js">markupTests.js</a></li>
                                <li class=""><a href="scriptTests.js.html" title="scriptTests.js">scriptTests.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2009 Yahoo! Inc. All rights reserved.
	</div>
</div>
<script type="text/javascript">
    ALL_YUI_PROPS = [{"access": "", "host": "YAHOO.widget.Carousel", "name": "addItem", "url": "YAHOO.widget.Carousel.html#method_addItem", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "addItems", "url": "YAHOO.widget.Carousel.html#method_addItems", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "afterScroll", "url": "YAHOO.widget.Carousel.html#event_afterScroll", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "allItemsRemovedEvent", "url": "YAHOO.widget.Carousel.html#event_allItemsRemovedEvent", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_animateAndSetCarouselOffset", "url": "YAHOO.widget.Carousel.html#method__animateAndSetCarouselOffset", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "animation", "url": "YAHOO.widget.Carousel.html#config_animation", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "animationChange", "url": "YAHOO.widget.Carousel.html#event_animationChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_animationCompleteHandler", "url": "YAHOO.widget.Carousel.html#method__animationCompleteHandler", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_animObj", "url": "YAHOO.widget.Carousel.html#property__animObj", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "autoPlay", "url": "YAHOO.widget.Carousel.html#config_autoPlay", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "autoPlayChange", "url": "YAHOO.widget.Carousel.html#event_autoPlayChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "autoPlayInterval", "url": "YAHOO.widget.Carousel.html#config_autoPlayInterval", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "autoPlayIntervalChange", "url": "YAHOO.widget.Carousel.html#event_autoPlayIntervalChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_autoScroll", "url": "YAHOO.widget.Carousel.html#method__autoScroll", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeAnimationChange", "url": "YAHOO.widget.Carousel.html#event_beforeAnimationChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeAutoPlayChange", "url": "YAHOO.widget.Carousel.html#event_beforeAutoPlayChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeAutoPlayIntervalChange", "url": "YAHOO.widget.Carousel.html#event_beforeAutoPlayIntervalChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeCarouselElChange", "url": "YAHOO.widget.Carousel.html#event_beforeCarouselElChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeCarouselItemElChange", "url": "YAHOO.widget.Carousel.html#event_beforeCarouselItemElChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeCurrentPageChange", "url": "YAHOO.widget.Carousel.html#event_beforeCurrentPageChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeFirstVisibleChange", "url": "YAHOO.widget.Carousel.html#event_beforeFirstVisibleChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeHide", "url": "YAHOO.widget.Carousel.html#event_beforeHide", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeIsCircularChange", "url": "YAHOO.widget.Carousel.html#event_beforeIsCircularChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeIsVerticalChange", "url": "YAHOO.widget.Carousel.html#event_beforeIsVerticalChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeNavigationChange", "url": "YAHOO.widget.Carousel.html#event_beforeNavigationChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeNumItemsChange", "url": "YAHOO.widget.Carousel.html#event_beforeNumItemsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeNumVisibleChange", "url": "YAHOO.widget.Carousel.html#event_beforeNumVisibleChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforePageChange", "url": "YAHOO.widget.Carousel.html#event_beforePageChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeRevealAmountChange", "url": "YAHOO.widget.Carousel.html#event_beforeRevealAmountChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeScroll", "url": "YAHOO.widget.Carousel.html#event_beforeScroll", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeScrollIncrementChange", "url": "YAHOO.widget.Carousel.html#event_beforeScrollIncrementChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeSelectedItemChange", "url": "YAHOO.widget.Carousel.html#event_beforeSelectedItemChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeSelectOnScrollChange", "url": "YAHOO.widget.Carousel.html#event_beforeSelectOnScrollChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "beforeShow", "url": "YAHOO.widget.Carousel.html#event_beforeShow", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "blur", "url": "YAHOO.widget.Carousel.html#method_blur", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "blur", "url": "YAHOO.widget.Carousel.html#event_blur", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "BUTTON", "url": "YAHOO.widget.Carousel.html#property_BUTTON", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "CAROUSEL", "url": "YAHOO.widget.Carousel.html#property_CAROUSEL", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_carouselEl", "url": "YAHOO.widget.Carousel.html#property__carouselEl", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "CAROUSEL_EL", "url": "YAHOO.widget.Carousel.html#property_CAROUSEL_EL", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "carouselEl", "url": "YAHOO.widget.Carousel.html#config_carouselEl", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "carouselElChange", "url": "YAHOO.widget.Carousel.html#event_carouselElChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "carouselItemEl", "url": "YAHOO.widget.Carousel.html#config_carouselItemEl", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "carouselItemElChange", "url": "YAHOO.widget.Carousel.html#event_carouselItemElChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "clearItems\npublic", "url": "YAHOO.widget.Carousel.html#method_clearItems\npublic", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_clipEl", "url": "YAHOO.widget.Carousel.html#property__clipEl", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "CONTAINER", "url": "YAHOO.widget.Carousel.html#property_CONTAINER", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "CONTENT", "url": "YAHOO.widget.Carousel.html#property_CONTENT", "type": "property"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "createCarousel", "url": "YAHOO.widget.Carousel.html#method_createCarousel", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "createCarouselClip", "url": "YAHOO.widget.Carousel.html#method_createCarouselClip", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "createCarouselItem", "url": "YAHOO.widget.Carousel.html#method_createCarouselItem", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "createElement", "url": "YAHOO.widget.Carousel.html#method_createElement", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "currentPage", "url": "YAHOO.widget.Carousel.html#config_currentPage", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "currentPageChange", "url": "YAHOO.widget.Carousel.html#event_currentPageChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "DISABLED", "url": "YAHOO.widget.Carousel.html#property_DISABLED", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_firstItem", "url": "YAHOO.widget.Carousel.html#property__firstItem", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "FIRST_NAV", "url": "YAHOO.widget.Carousel.html#property_FIRST_NAV", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "FIRST_NAV_DISABLED", "url": "YAHOO.widget.Carousel.html#property_FIRST_NAV_DISABLED", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "FIRST_PAGE", "url": "YAHOO.widget.Carousel.html#property_FIRST_PAGE", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "FIRST_VISIBLE", "url": "YAHOO.widget.Carousel.html#property_FIRST_VISIBLE", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "firstVisible", "url": "YAHOO.widget.Carousel.html#config_firstVisible", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "firstVisibleChange", "url": "YAHOO.widget.Carousel.html#event_firstVisibleChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "focus", "url": "YAHOO.widget.Carousel.html#method_focus", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "focus", "url": "YAHOO.widget.Carousel.html#event_focus", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "FOCUSSED_BUTTON", "url": "YAHOO.widget.Carousel.html#property_FOCUSSED_BUTTON", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getById", "url": "YAHOO.widget.Carousel.html#method_getById", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "getCarouselItemSize", "url": "YAHOO.widget.Carousel.html#method_getCarouselItemSize", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getElementForItem", "url": "YAHOO.widget.Carousel.html#method_getElementForItem", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getElementForItems", "url": "YAHOO.widget.Carousel.html#method_getElementForItems", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "getFirstVisibleForPosition", "url": "YAHOO.widget.Carousel.html#method_getFirstVisibleForPosition", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getItem", "url": "YAHOO.widget.Carousel.html#method_getItem", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getItemPositionById", "url": "YAHOO.widget.Carousel.html#method_getItemPositionById", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getItems", "url": "YAHOO.widget.Carousel.html#method_getItems", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "getScrollOffset", "url": "YAHOO.widget.Carousel.html#method_getScrollOffset", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_getSelectedItem", "url": "YAHOO.widget.Carousel.html#method__getSelectedItem", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "getStyle", "url": "YAHOO.widget.Carousel.html#method_getStyle", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_getValidIndex", "url": "YAHOO.widget.Carousel.html#method__getValidIndex", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "getVisibleItems", "url": "YAHOO.widget.Carousel.html#method_getVisibleItems", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_hasFocus", "url": "YAHOO.widget.Carousel.html#property__hasFocus", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_hasRendered", "url": "YAHOO.widget.Carousel.html#property__hasRendered", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "hide", "url": "YAHOO.widget.Carousel.html#method_hide", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "hide", "url": "YAHOO.widget.Carousel.html#event_hide", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "HORIZONTAL", "url": "YAHOO.widget.Carousel.html#property_HORIZONTAL", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "HORZ_MIN_WIDTH", "url": "YAHOO.widget.Carousel.html#property_HORZ_MIN_WIDTH", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "init", "url": "YAHOO.widget.Carousel.html#method_init", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "initAttributes", "url": "YAHOO.widget.Carousel.html#method_initAttributes", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "initEvents", "url": "YAHOO.widget.Carousel.html#method_initEvents", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "instances", "url": "YAHOO.widget.Carousel.html#property_instances", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isAnimating", "url": "YAHOO.widget.Carousel.html#method_isAnimating", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_isAnimationInProgress", "url": "YAHOO.widget.Carousel.html#property__isAnimationInProgress", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_isAutoPlayInProgress", "url": "YAHOO.widget.Carousel.html#property__isAutoPlayInProgress", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isAutoPlayOn", "url": "YAHOO.widget.Carousel.html#method_isAutoPlayOn", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isCircular", "url": "YAHOO.widget.Carousel.html#config_isCircular", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isCircularChange", "url": "YAHOO.widget.Carousel.html#event_isCircularChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isVertical", "url": "YAHOO.widget.Carousel.html#config_isVertical", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "isVerticalChange", "url": "YAHOO.widget.Carousel.html#event_isVerticalChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "itemAdded", "url": "YAHOO.widget.Carousel.html#event_itemAdded", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_itemClickHandler", "url": "YAHOO.widget.Carousel.html#method__itemClickHandler", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "ITEM_LOADING", "url": "YAHOO.widget.Carousel.html#property_ITEM_LOADING", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "ITEM_LOADING_CONTENT", "url": "YAHOO.widget.Carousel.html#property_ITEM_LOADING_CONTENT", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "itemRemoved", "url": "YAHOO.widget.Carousel.html#event_itemRemoved", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "itemSelected", "url": "YAHOO.widget.Carousel.html#event_itemSelected", "type": "event"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_itemsTable", "url": "YAHOO.widget.Carousel.html#property__itemsTable", "type": "property"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_keyboardEventHandler", "url": "YAHOO.widget.Carousel.html#method__keyboardEventHandler", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_loadItems", "url": "YAHOO.widget.Carousel.html#method__loadItems", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "loadItems", "url": "YAHOO.widget.Carousel.html#event_loadItems", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "MAX_PAGER_BUTTONS", "url": "YAHOO.widget.Carousel.html#property_MAX_PAGER_BUTTONS", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "MIN_WIDTH", "url": "YAHOO.widget.Carousel.html#property_MIN_WIDTH", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_navBtns", "url": "YAHOO.widget.Carousel.html#property__navBtns", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NAV_CONTAINER", "url": "YAHOO.widget.Carousel.html#property_NAV_CONTAINER", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_navEl", "url": "YAHOO.widget.Carousel.html#property__navEl", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NAVIGATION", "url": "YAHOO.widget.Carousel.html#property_NAVIGATION", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "navigation", "url": "YAHOO.widget.Carousel.html#config_navigation", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "navigationChange", "url": "YAHOO.widget.Carousel.html#event_navigationChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "navigationStateChange", "url": "YAHOO.widget.Carousel.html#event_navigationStateChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NEXT_BUTTON_TEXT", "url": "YAHOO.widget.Carousel.html#property_NEXT_BUTTON_TEXT", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_nextEnabled", "url": "YAHOO.widget.Carousel.html#property__nextEnabled", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NEXT_NAV", "url": "YAHOO.widget.Carousel.html#property_NEXT_NAV", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NEXT_PAGE", "url": "YAHOO.widget.Carousel.html#property_NEXT_PAGE", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "numItems", "url": "YAHOO.widget.Carousel.html#config_numItems", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "numItemsChange", "url": "YAHOO.widget.Carousel.html#event_numItemsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "NUM_VISIBLE", "url": "YAHOO.widget.Carousel.html#property_NUM_VISIBLE", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "numVisible", "url": "YAHOO.widget.Carousel.html#config_numVisible", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "numVisibleChange", "url": "YAHOO.widget.Carousel.html#event_numVisibleChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "pageChange", "url": "YAHOO.widget.Carousel.html#event_pageChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "PAGE_FOCUS", "url": "YAHOO.widget.Carousel.html#property_PAGE_FOCUS", "type": "property"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_pagerClickHandler", "url": "YAHOO.widget.Carousel.html#method__pagerClickHandler", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "PAGER_PREFIX_TEXT", "url": "YAHOO.widget.Carousel.html#property_PAGER_PREFIX_TEXT", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_pages", "url": "YAHOO.widget.Carousel.html#property__pages", "type": "property"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "parseCarousel", "url": "YAHOO.widget.Carousel.html#method_parseCarousel", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "parseCarouselItems", "url": "YAHOO.widget.Carousel.html#method_parseCarouselItems", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "parseCarouselNavigation", "url": "YAHOO.widget.Carousel.html#method_parseCarouselNavigation", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_prevEnabled", "url": "YAHOO.widget.Carousel.html#property__prevEnabled", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "PREVIOUS_BUTTON_TEXT", "url": "YAHOO.widget.Carousel.html#property_PREVIOUS_BUTTON_TEXT", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "PREV_PAGE", "url": "YAHOO.widget.Carousel.html#property_PREV_PAGE", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "_recomputeSize", "url": "YAHOO.widget.Carousel.html#property__recomputeSize", "type": "property"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_refreshUi", "url": "YAHOO.widget.Carousel.html#method__refreshUi", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "removeItem", "url": "YAHOO.widget.Carousel.html#method_removeItem", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "render", "url": "YAHOO.widget.Carousel.html#method_render", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "revealAmount", "url": "YAHOO.widget.Carousel.html#config_revealAmount", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "revealAmountChange", "url": "YAHOO.widget.Carousel.html#event_revealAmountChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "scrollBackward", "url": "YAHOO.widget.Carousel.html#method_scrollBackward", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "scrollForward", "url": "YAHOO.widget.Carousel.html#method_scrollForward", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "scrollIncrement", "url": "YAHOO.widget.Carousel.html#config_scrollIncrement", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "scrollIncrementChange", "url": "YAHOO.widget.Carousel.html#event_scrollIncrementChange", "type": "event"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "scrollPageBackward", "url": "YAHOO.widget.Carousel.html#method_scrollPageBackward", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "scrollPageForward", "url": "YAHOO.widget.Carousel.html#method_scrollPageForward", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "scrollTo", "url": "YAHOO.widget.Carousel.html#method_scrollTo", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "SELECTED_ITEM", "url": "YAHOO.widget.Carousel.html#property_SELECTED_ITEM", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectedItem", "url": "YAHOO.widget.Carousel.html#config_selectedItem", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectedItemChange", "url": "YAHOO.widget.Carousel.html#event_selectedItemChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "SELECTED_NAV", "url": "YAHOO.widget.Carousel.html#property_SELECTED_NAV", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectNextItem", "url": "YAHOO.widget.Carousel.html#method_selectNextItem", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectOnScroll", "url": "YAHOO.widget.Carousel.html#config_selectOnScroll", "type": "config"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectOnScrollChange", "url": "YAHOO.widget.Carousel.html#event_selectOnScrollChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "selectPreviousItem", "url": "YAHOO.widget.Carousel.html#method_selectPreviousItem", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setCarouselOffset", "url": "YAHOO.widget.Carousel.html#method__setCarouselOffset", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setClipContainerSize", "url": "YAHOO.widget.Carousel.html#method__setClipContainerSize", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setContainerSize", "url": "YAHOO.widget.Carousel.html#method__setContainerSize", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setFirstVisible", "url": "YAHOO.widget.Carousel.html#method__setFirstVisible", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "setItemSelection", "url": "YAHOO.widget.Carousel.html#method_setItemSelection", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setNavigation", "url": "YAHOO.widget.Carousel.html#method__setNavigation", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setNumItems", "url": "YAHOO.widget.Carousel.html#method__setNumItems", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setNumVisible", "url": "YAHOO.widget.Carousel.html#method__setNumVisible", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setOrientation", "url": "YAHOO.widget.Carousel.html#method__setOrientation", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setRevealAmount", "url": "YAHOO.widget.Carousel.html#method__setRevealAmount", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setSelectedItem", "url": "YAHOO.widget.Carousel.html#method__setSelectedItem", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_setupCarouselNavigation", "url": "YAHOO.widget.Carousel.html#method__setupCarouselNavigation", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "show", "url": "YAHOO.widget.Carousel.html#method_show", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "show", "url": "YAHOO.widget.Carousel.html#event_show", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "startAutoPlay", "url": "YAHOO.widget.Carousel.html#method_startAutoPlay", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "startAutoPlay", "url": "YAHOO.widget.Carousel.html#event_startAutoPlay", "type": "event"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "stopAutoPlay", "url": "YAHOO.widget.Carousel.html#method_stopAutoPlay", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "stopAutoPlay", "url": "YAHOO.widget.Carousel.html#event_stopAutoPlay", "type": "event"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "syncNavigation", "url": "YAHOO.widget.Carousel.html#method_syncNavigation", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "syncPagerUi", "url": "YAHOO.widget.Carousel.html#method_syncPagerUi", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "syncUi", "url": "YAHOO.widget.Carousel.html#method_syncUi", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_syncUiForItemAdd", "url": "YAHOO.widget.Carousel.html#method__syncUiForItemAdd", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_syncUiForLazyLoading", "url": "YAHOO.widget.Carousel.html#method__syncUiForLazyLoading", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "toString", "url": "YAHOO.widget.Carousel.html#method_toString", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_updateNavButtons", "url": "YAHOO.widget.Carousel.html#method__updateNavButtons", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_updatePagerButtons", "url": "YAHOO.widget.Carousel.html#method__updatePagerButtons", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_updatePagerMenu", "url": "YAHOO.widget.Carousel.html#method__updatePagerMenu", "type": "method"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "updateStateAfterScroll", "url": "YAHOO.widget.Carousel.html#method_updateStateAfterScroll", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_updateTabIndex", "url": "YAHOO.widget.Carousel.html#method__updateTabIndex", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateAnimation", "url": "YAHOO.widget.Carousel.html#method__validateAnimation", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateFirstVisible", "url": "YAHOO.widget.Carousel.html#method__validateFirstVisible", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateNavigation", "url": "YAHOO.widget.Carousel.html#method__validateNavigation", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateNumItems", "url": "YAHOO.widget.Carousel.html#method__validateNumItems", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateNumVisible", "url": "YAHOO.widget.Carousel.html#method__validateNumVisible", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateRevealAmount", "url": "YAHOO.widget.Carousel.html#method__validateRevealAmount", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.Carousel", "name": "_validateScrollIncrement", "url": "YAHOO.widget.Carousel.html#method__validateScrollIncrement", "type": "method"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "VERTICAL", "url": "YAHOO.widget.Carousel.html#property_VERTICAL", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "VERTICAL_CONTAINER", "url": "YAHOO.widget.Carousel.html#property_VERTICAL_CONTAINER", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "VERT_MIN_WIDTH", "url": "YAHOO.widget.Carousel.html#property_VERT_MIN_WIDTH", "type": "property"}, {"access": "", "host": "YAHOO.widget.Carousel", "name": "VISIBLE", "url": "YAHOO.widget.Carousel.html#property_VISIBLE", "type": "property"}, {"access": "private", "host": "YAHOO.widget.Carousel", "name": "WidgetName", "url": "YAHOO.widget.Carousel.html#property_WidgetName", "type": "property"}];
</script>
</body>
</html>
